react、redux、react-redux全家桶！！！

1、以 create-react-app 为基础创建一个项目

create-react-app example

2、删除一些多余得文件后，整个文件夹目录为

App.js index.html

3、下载一些后续需要得包

cnpm install redux react-redux redux-saga antd --save

4、创建需要得文件夹

5、order_action.js

export const getOrderList = (params) => {
  return ({
    type: 'GET_ORDERLIST',
    payload: params
  })
}

6、reducers/order_reducer.js

const orderState = {
  orderList: []
}

export function handleOrderOperate(state = orderState, actions) {
  switch(actions.type) {
    case 'GET_ORDERLIST': // GET_ORDERLIST 对应的是action里面那个type，记住名字要一样， 
    // reducer监听触发action， 然后会通过 type的value进行查找
      return {
        ...state,
        orderList: actions.payload
      }
    case 'DEL_ORDERLIST': // 删除某个订单
      return {
        ...state,
        orderList: actions.payload
      }
    default:
      return {
        ...state
      }
  }
}

7、store / index.js 创建 store

import { createStore } from 'redux';

import { handleOrderOperate } from '../reducers/order_reducer';

const store = createStore(handleOrderOperate)

export default store;

8、react-redux 中提供了一个 叫 Provider 的函数， 他放在最顶层， 下面的就都可以拿到store里面的信息了

9、启动 npm run start

10、创建一个界面 component / order.js

通过 connect 把 store里面的数据和 dispatch ，注入到props放到这个页面里面 打印结果

触发 action
在 reducers / order_reducer.js 打印数据 然后数据如何使用呢, 其实数据已经进来了， 通过 connect 注入进来的

这里数据更新 触发了重新 render。 这篇文章主要是说 react 、 redux 、 react-readux 他们之间如何实现的

同样的代码在Git 上了，