redux

我自己的理解redux就跟vue中的vuex差不多,都是数据管理器,话不多说,我们从经典的计数器案例开始讲解 使用redux实现计数器 创建如下的react项目,我习惯把每一个模块分块,才有这么多文件,当然你也可以写在一个js文件中,这不是重点 首先我们看一下项目的入口文件index.js import 'core-js/fn/object/assign'; import React from 'react'; import ReactDOM from 'react-dom'; import Counter from './components/Counter'; //引入计数器件 import {createStore} from 'redux'; //通过解构赋值得到createStore,为store的创建做准备 import reducer from './reducers/index' //引入reducer纯函数 该函数,根据action的type不同结合旧的state返回新的state let store = createStore(reducer); //创建redux的核心 store store我会在后面进行详细的解答 import {numAdd,numDel} from './actions/index'; //引入action函数,触发什么操作

TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象；使用数据流能帮我们明确了行为对应的响应，这和react的状态可预测的思想是不谋而合的。 常见的数据流框架有Flux/reFlux/Redux。相比其它数据流框架，Redux 轻量 (压缩后只有2K),而且在一个react项目中，Redux维护了 单一的状态树 。 下面我们来具体看看为什么要使用数据流 不只是前端，很多系统开发的时候遵从的都是MVC分离，也就是数据放在Model里面，View来控制显示，Controler做整体的管理。但是随着系统的庞大，它会产生一系列问题。比如举个例子，我们上网shopping，提交订单，那么用户的账号，优惠信息，物流信息，库存等等的Model都会发生更新变化，然后View上的显示也会随之变化，反过来，View的有些变化也会对Model产生影响，这样就使用户下了一个订单以后界面会变得什么样变得不可预测。 所以在React出现的同时Facebook也搞出了一个Flux数据流( React是纯V层框架，需要数据流进行支撑 )，它的思想如下: 它认为用户有各种各样的Action,然后所有的Action由一个统一的Dispacher分发到若干个Store里去，这个Store保存着数据也保存着页面的状态，根据数据和页面的状态，一个store只能向视图层传递信息

bindActionCreators (actionCreators ,dispatch ) 把 action creators 转成拥有同名 keys 的对象，但使用 dispatch 把每个 action creator 包围起来，这样可以直接调用它们。 一般情况下你可以直接在 Store 实例上调用 dispatch 。如果你在 React 中使用 Redux，react-redux 会提供 dispatch 。 惟一使用 bindActionCreators 的场景是当你需要把 action creator 往下传到一个组件上，却不想让这个组件觉察到 Redux 的存在，而且不希望把 Redux store 或 dispatch 传给它。 为方便起见，你可以传入一个函数作为第一个参数，它会返回一个函数。 参数 actionCreators ( Function or Object ): 一个 action creator，或者键值是 action creators 的对象。 dispatch ( Function ): 一个 dispatch 函数，由 Store 实例提供。 返回值 ( Function or Object ): 一个与原对象类似的对象，只不过这个对象中的的每个函数值都可以直接 dispatch action。如果传入的是一个函数，返回的也是一个函数。