深入Redux简述在快速理解redux中，我简单的介绍了redux的基础内容，本篇文章中，我们将再度深入redux。redux解决的问题数据和函数的层层传递多个组件同时修改某全局变量一、react数据流众所周知，react的单向数据流是这样的，父组件可以向子组件传递数据我们通常用过状态提升将数据存于高阶函数中，使我们的子组件尽可能的更"纯"，更好的实现代码复用。可能在页面结构简单的小型项目中我们还没觉得有什么不妥，但是倘若在页面结构稍复杂的项目中，就会变成这样D组件中的数据存于Container中，要通过Container -> Content -> B -> D才能到达D组件。当然，这对我们聪明有能干的开发者们并不算什么，耗些时间也能刚出来。Then，这种页面，你还能搞得定吗？就算你能搞定，你的代码中也有大量的冗余，从Container到N之间的所有组件都要传递N需要的props所以，为了解决层层传递,react-redux就出现了它利用了react中的context，在Container的context里创建store，使Container的所有子组件，孙组件等等都可以直接获取store中的内容。二、修改store我曾在快速理解redux中提起，为了解决模块（组件）之间需要共享数据 和 数据可能被任意修改导致不可预料的结果 的矛盾，redux团队创建了dispatch。So 不可预料的结果究竟是什么？我们思考一个问题，假如所有的组件都以 store.xxx = xxx; // 伪代码 这种方式修改全局变量，会引发什么问题？我们再思考，为何python等语言会存在线程锁，数据库也存在锁，操作系统的生产者/消费者问题等等假如A和B同时修改store，store是遵从A还是遵从B？为了避免以上情况引发死锁redux想出了一个办法：封装一个dispatch函数，接收一个action对象作为参数，每当组件想要修改store时必须给dispatch传递action，然后再store内部根据action对象的type将dispatch分发到相应的队列中，每一时刻仅执行一个dispatch三、redux异步问题思考这样一个情景，我们从后端的接口获取了数据，我们想将其存入store中。但是当执行到reducer时，数据是否已经获取到？假如没有，又该怎么办？就在此时，中间件出现了，例如 redux-saga, redux-thunk 等等。redux-saga 使用了generate生成器，使开发者可以按同步思路的书写异步代码，再根据action的type选择相应reducer更新storefunction *fetchNodeDetailByNodeId({ payload: { nodeId } }, { call, put }) { try { const { data, status }= yield call(fetchNodeDetailByNodeId, nodeId) if (data && status.errmsg === ‘success’) { yield put({ type: ‘setStates’, payload: { nodeDetailData: data, }, }); } else { message.info(‘开了个小差,再试一次吧..’); } } catch (error) { console.log(error); }},