一篇文章介绍redux、react-redux、redux-saga总结

本篇主要将react全家桶的产品非常精炼的提取了核心内容，精华程度堪比精油。各位大人，既然来了，客官您坐，来人，给客官看茶~~

redux

前言

首先，本篇文章要求您对js,react等知识有一定的了解，如果不曾了解，建议您先看一下：React精髓！一篇全概括(急速)

React有props和state:

props意味着父级分发下来的属性 state意味着组件内部可以自行管理的状态，并且整个React没有数据向上回溯的能力，这就是react的单向数据流

这就意味着如果是一个数据状态非常复杂的应用，更多的时候发现React根本无法让两个组件互相交流，使用对方的数据，react的通过层级传递数据的这种方法是非常难受的，这个时候，迫切需要一个机制，把所有的state集中到组件顶部，能够灵活的将所有state各取所需的分发给所有的组件，是的，这就是redux

简介

redux是的诞生是为了给 React 应用提供「可预测化的状态管理」机制。 Redux会将整个应用状态(其实也就是数据)存储到到一个地方，称为store 这个store里面保存一棵状态树(state tree) 组件改变state的唯一方法是通过调用store的dispatch方法，触发一个action，这个action被对应的reducer处理，于是state完成更新 组件可以派发(dispatch)行为(action)给store,而不是直接通知其它组件 其它组件可以通过订阅store中的状态(state)来刷新自己的视图

使用步骤

创建reducer

创建action

创建的store，使用createStore方法

按步骤手把手实战。

上述步骤，对应的序号，我会在相关代码标出

npm install redux -S // 安装import { createStore } from 'redux' // 引入const reducer = (state = {count: 0}, action) => {----------> ⑴ switch (action.type){ case 'INCREASE': return {count: state.count + 1}; case 'DECREASE': return {count: state.count - 1}; default: return state; }}const actions = {---------->⑵ increase: () => ({type: 'INCREASE'}), decrease: () => ({type: 'DECREASE'})}const store = createStore(reducer);---------->⑶store.subscribe(() => console.log(store.getState()));store.dispatch(actions.increase()) // {count: 1}store.dispatch(actions.increase()) // {count: 2}store.dispatch(actions.increase()) // {count: 3}