从零开始搭建一个react项目开发(10)

1、Provider

redux的基本工作已经完成，最后一步就是返回到app.js 文件， 首先我们不再需要导入 ToDoApp 组件，而是用容器组件ToDoAppContainer来替代，然后需要导入 configureStore 函数和 Provider，在头部添加代码：

import { Provider } from 'react-redux';
import ToDoAppContainer from './containers/ToDoAppContainer';
import configureStore from './redux/configureStore';

configureStore is the function we created that takes our combined reducers and our redux middleware and mashes them all together. Let's intialize that with the following line:

const store = configureStore();

然后return的jsx中同样需要把ToDoApp 改为 ToDoAppContainer，然后需要用Provider 组件将其包裹，它的作用就是将整个app的state传递给它所包裹的容器，从而使容器组件可以获取这些state。

<Provider store={store}> // we pass the store through to Provider with props
 <ToDoAppContainer />
</Provider>

现在整个redux的基本结构已经搭建起来，下一步就可以把整个行为逻辑代码补充进去就可以了。

Redux Actions 和 Reducers

搭建起redux的基本结构后，就可以填充redux的元素了，简单来说我们只需要记住四个概念， Types, Actions, Action Creators, and Reducers。然后把这些元素用ducks的文件组织结构组织起来就可以了。

Ducks

规则

在module中我们需要遵循下面的代码风格和命名方式：

1. 须用 export default 输出名为 reducer()的函数
2. 须用 export 输出 函数形式的action creators
3. 须用 npm-module-or-app/reducer/ACTION_TYPE的命名形式来命名action types，因为到后期很多reducer，不同的人协同工作难免会出现命名重复，这样子加上app和模块的前缀的话就不会出现命名冲突的问题。
4. 须用大写的蛇形方式UPPER_SNAKE_CASE来命名action types。

Types

这个types就是上面第三条中需要按照ducks的规范命名的常量名字，将其写在文件的顶部，当action 触发时候会传递给reducer，reducer的switch语句会根据这个type来进行相应的数据处理。

const ADD_ITEM = 'my-app/toDoApp/ADD_ITEM';
const DELETE_ITEM = 'my-app/toDoApp/DELETE_ITEM';

Actions

Actions 就是一个至少包含type的简单的js对象，同时可以包含数据以便传递给reducer。当用户在页面上触发了某种行为，一个aciton creator将会发送aciton给reducer做数据处理。

action示例如下：

{ type: ADD_ITEM, item: 'Adding this item' }
{ type: DELETE_ITEM, index: 1 }
{ type: POP_ITEM }