日日行,不怕千万里

Redux React-redux 理解

Redux 类似于一个state  数据树,将所有的 数据存储到这个 store 上.

  reducer / action  其中 reducer 存储的数据,action 是出发的动作,唯一一个修改 reducer 的,其中内部的 subscrible 是一个监听。

 

// react -redux 使用方法

react-redux 提供了connect 方法;

  import { connect } from 'react-redux';

  const mapStateToProps = (state) => ({ list: state.list });

  const mapDispatchToProps = (dispatch) => ({ getTodoList: () => dispatch(TodoList.getTodoList()) })

  import default connect({ mapStateToProps, mapDispatchToProsp })(TodoList);

 

// dva 封装数据 封装 react、react-redux、

  import { queryBasicProfile, queryAdvancedProfile } from '../services/api';

  export default  {
    namespace: 'profile',      

    state: {                           //  保存数值
      basicGoods: [],
    },

    effects: {                      // action  触发的的动作
      *fetchBasic(_, { call, put, select }) {
        yield put({

           type: 'changeLoading',  

          payload: { basicLoading: true },
        });
        const response = yield call(queryBasicProfile);
        yield put({
          type: 'show',
          payload: response,
        });
      },
    },

    reducers: {     //  保存数值
      show:  (state, { payload })  => ({

        ...state,

        ...payload,

       }) 
    },
  };

 

posted @ 2017-12-03 22:43  GongXiaoZhu  阅读(277)  评论(0编辑  收藏  举报