浅析Redux数据流
-- React Redux 数据流 通过这张流程图,我们可以更好的理解Redux和React直接数据如何流通,关系如何映射。 让我们一步步来了解图中的各个概念。 action & actionCreatoraction creator 就是函数而已,负责构建一个 action (是的,action creator 这个名字已经很明显了)并返回它。通过几行简单的代码就可以解释清楚了! const actionCreator = function () { return { type : 'AN_ACTION' } } 一般约定 action 是一个拥有 type 属性的对象。 console.log(actionCreator()) // { type: 'AN_ACTION' } reducerReducer 函数只是一个纯函数,它接收应用程序的当前状态以及发生的 action,然后返回修改后的新状态(或者有人称之为归并后的状态)。Reducer 函数是 action 的订阅者。 const reducer = function (state = {},action) { console.log('reducer was called with state',state,'and action',action); return state; } Store以上,action描述“发生了什么”,而reducer根据action来更新state。但是他们两者之间是如何关联的呢? 不用担心,Redux 会帮你把action和reducer连接起来。 我们把 Redux实例称为 import { createStore } from 'redux' const store_0 = createStore(() => {}) 注意:在createStore时,需要给它传入一个 reducer 函数。 每当一个action发生时,Redux都能调用这个函数。往 createStore 传 Reducer 的过程就是给 Redux绑定 action处理函数(也就是Reducer)的过程。 接下来,试着在 Reducer 中打印一些 log const reducer = function (...args) { console.log('Reducer was called with args',args) } const store_1 = createStore(reducer) // 输出:Reducer was called with args [ undefined,{ type: '@@redux/INIT' } ] 我们没有dispatch(分发)任何action,但是reducer被调用了!这是由于初始化应用state的时候,Redux dispatch 了一个初始化的 action 如何读取store中的state? Redux为我们提供了 import { createStore } from 'redux' const reducer_2 = function (state = {},action) { console.log('reducer_2 was called with state',action) return state; } const store_2 = createStore(reducer_2) // 输出: reducer_2 was called with state {} and action { type: '@@redux/INIT' } console.log('store_2 state after initialization:',store_2.getState()) // 输出: store_2 state after initialization: {} 如何dispatch action? 我们需要使用 // 接以上代码 const anAction = { type : 'AN_ACTION' } store_2.dispatch(anAction); // 输出:reducer_2 was called with state {} and action { type: 'AN_ACTION' } combineReducers
const userReducer = function (state = {},action) { console.log('userReducer was called with state',action) switch (action.type) { // etc. default: return state; } } const itemsReducer = function (state = [],action) { console.log('itemsReducer was called with state',action) switch (action.type) { // etc. default: return state; } } import { createStore,combineReducers } from 'redux' const reducer = combineReducers({ user : userReducer,items : itemsReducer }) // 输出: // userReducer was called with state {} and action { type: '@@redux/INIT' } // userReducer was called with state {} and action { type: '@@redux/PROBE_UNKNOWN_ACTION_9.r.k.r.i.c.n.m.i' } // itemsReducer was called with state [] and action { type: '@@redux/INIT' } // itemsReducer was called with state [] and action { type: '@@redux/PROBE_UNKNOWN_ACTION_4.f.i.z.l.3.7.s.y.v.i' } var store_0 = createStore(reducer) // 输出: // userReducer was called with state {} and action { type: '@@redux/INIT' } // itemsReducer was called with state [] and action { type: '@@redux/INIT' } console.log('store_0 state after initialization:',store_0.getState()) // 输出: // store_0 state after initialization: { user: {},items: [] } 回过头来看看文章开头的数据流向图View组件通过click等事件,dispatch一个(actionCreator返回的)action,通过Store把当前状态state和action传递给订阅者reducer函数,reducer返回一个新的状态存储在Store中,Store又把新的State传递给View组件触发组件更新。 为了将Redux和React联系到一起。就需要用到 import { connect } from 'react-redux' const containerComponent = connect(mapStateToProps,mapDispatchToProps)(presentationalComponent) 简单来说,mapStateToProps和mapDispatchToProps就是分别把Redux的state,和dispatch(action)映射到React组件中作为props。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |