Code Monkey home page Code Monkey logo

Comments (7)

ZhangLynn avatar ZhangLynn commented on June 20, 2024

老师能否介绍一下,如何在reducer 之间共享 state,现在找到的一个方案是使用reduce-reducer库

from 2018.10.

zhulin2609 avatar zhulin2609 commented on June 20, 2024

老师能否介绍一下,如何在reducer 之间共享 state,现在找到的一个方案是使用reduce-reducer库

首先这是一种所谓的redux反模式
一般如果真的用到了外部数据,我们更多地是把其他的reducer字段以参数的形式,挂载到action.ext.xxx传进来。那么action.ext又是怎么拿到的呢?类似下面的代码

// action1.js

export function setUserStatus(name) {
   return {
            types: [REQUEST, REQUEST_SUCCESS, REQUEST_FAIL],
            data: {
                from_id: querystring.fromid
            },
            url: `/api-test/xxx`,
            type: 'get',
            ext: {
                    name
            }
        }
    }
}

export function userState(state) {
    return (dispatch,getState)=>{

        // 获得其他reducer中的字段
        let {name} = getState().reducer2;

        dispatch(setUserStatus(name));

    }
}
// reducer1.js

import {
    REQUEST, REQUEST_SUCCESS, REQUEST_FAIL
} from '../action/action1';

function appStatus (state = {}, action) {
    switch (action.type) {        
        case REQUEST_SUCCESS:
            let name = action.ext.name
            return action.status;
        default:
            return state;
    }
}

export default appStatus;

比如对列表某项的增删改查,我可能要获取这条数据的数据,就是说把这条数据放到增删改查的action的payload类似字段里面对么

// action.js
export function curdItemAPI(item_data) {
   return {
            types: [REQUEST, REQUEST_SUCCESS, REQUEST_FAIL],
            data: {
                item_data
            },
            url: `/api/curdItem`,
            type: 'post'
        }
    }
}

export function curdItem() {
    return (dispatch,getState)=>{

        // 获得其他reducer中的字段
        let {item_data} = getState().reducer2;

        dispatch(curdItemAPI(item_data));

    }
}

// component.js

import {curdItem} from '../action.js'

componentDidMount() {
    curdItem()
}

from 2018.10.

ZhangLynn avatar ZhangLynn commented on June 20, 2024

异步action的方案,老师在项目中觉得最顺手的是哪个呢,redux-thunk还是redux-saga,saga很强大,但是相对麻烦一点,最近在考虑在项目中要不要上saga

from 2018.10.

zhulin2609 avatar zhulin2609 commented on June 20, 2024

异步action的方案,老师在项目中觉得最顺手的是哪个呢,redux-thunk还是redux-saga,saga很强大,但是相对麻烦一点,最近在考虑在项目中要不要上saga

我们现在用的是redux-thunk,但是如你所说redux-saga更强大,至少可以帮我们节约一些模板代码,比如现在我们要引用一堆action,所以我们也在考虑找个项目试用saga

from 2018.10.

zhulin2609 avatar zhulin2609 commented on June 20, 2024

【链接】RenderProps-React
https://react.docschina.org/docs/render-props.html

render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
        {props.flag ? <Cat mouse={this.state} /> : <Dog mouse={this.state} />}
        
      </div>
    );
  }

from 2018.10.

zhulin2609 avatar zhulin2609 commented on June 20, 2024

大中型项目多少的打包时间,打包大小才是一个比较合适的状态,有没有关于打包的最佳实践,特别是webpack4的打包规则好像和之前不一样了。
怎么去判断一个项目的打包是合理的,优秀的呢

打包时间 = f(codeLines, packProcesses);

from 2018.10.

zhulin2609 avatar zhulin2609 commented on June 20, 2024

老师讲下服务端渲染吧~

核心api: renderToString

考虑到react ssr一般都是同构的方案,但是服务端是没有浏览器的api的,所以在组件的constructor, render等方法中不能出现浏览器的api。

如何在服务端处理浏览器api?
参照axios做个工具库,在打包的时候分别构建浏览器和服务端所需要的不用的api,使用

Object.defineProperties(global, {
        document: {
            get: function() {
                if (process.domain && process.domain.document) {
                    return process.domain.document
                } else {
                    return undefined
                }
            }
        }
})

做兜底

利用https://nodejs.org/dist/latest-v11.x/docs/api/domain.html 做请求级的用户上下文环境

或者直接使用https://github.com/zeit/next.js 这样的方案

from 2018.10.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.