react框架的redux心得记录(一)

开篇

React 框架很大，关于他的基本介绍这里就不多说了可以阅读它的官方文档http://cn.redux.js.org/，这个框架学习成本有点高，主要难点的不在react,react只是MVC里面的M(视图)，而是在于他的路由react-route,react-redux状态管理。学习redux需要有的几点基本的认识：

1.  理解不变性， 存储在store里面的state状态的不可变，我们不能直接操作state,只能返回新的状态，
   可以参考Immutable.jshttps://cloud.tencent.com/developer/doc/1118，暂时先不使用这个库，下篇来进一步的优化
2. vue里面的vuex，是借鉴的redux，理解了vuex的，学习redux起来就会轻松很多
3. 第二条是废话

redux的工作原理

redux是干啥的，首先要有明确的认识，就是组件之间共享状态的，我们可以把它看成大街上的公交车，我们有出行的需要的时候就会去坐。而在redux里面就是组件之间通信困难了，父子组件，兄弟组件的基本通信搞不定了，或者搞起来很麻烦了，这时候就考虑使用redux吧，他就是react里面的数据通信的公交车。

store是来保存共享状态state的一个容器，当我们的组件component要更新数据的时候，就要去store里面取，但是redux机制，组件不能直接去找store要，找了也不甩你，而要通过action这个事件，store才会理睬组件的需求，当store收到一个组件的action时，store自己也不会亲自去处理这个事情，甩手掌柜的啊！当然事情还是得做，store会委托给reducer这个代理人，去招待不请自来的action。action里面有state,payload两个参数，一个是状态，一个要做的操作，增删查改的数据

reducer是个纯函数，可以查看以前的状态，执行action操作后生成新的状态，图片来自网络，版权归网络

 说那么多只是为我自己记忆，没有代码演示，是没有灵魂的:

react脚手架，搭建测试环境，跑起来

create-react-app  demo
cd demo
yarn start

删除src下面的所有文件，保留index.js,清空里面的内容，排除干扰

import { createStore } from 'redux'

 创建store

/第二步,创建store,里面放的是状态state,是状态的容器
const store = createStore()

上面说过，store是甩手掌柜，不干活的，只负责看管，所以我们还需要它的委托人reducer,reducer需要两个参数，state&action

//第三部，创建一个reducer，参数state是保存在store里面的状态，action是一个容器,有两个属性，一个
//是type,字符串常量，payload用于更新状态的数据
//第四步，给state赋值默认值
 const reducer = function (state = [], action) {

  return state;
} 

把reducer传给store

//创建store,里面放的是状态state,是状态的容器
const store = createStore(reducer)

刚才我们新建一个公用的reducer,现在拆分成各自不同的reducer

//第五步，创建多个reducer，需要redux提供的combineReducers

const productsReducer = function (state = [], action) {
      return state;
}
const cartReducer = function (state = [], action) {
  return state;
}

const allReducers = {
  productsReducer, cartReducer
}

此时要引入redux的combineReducers

import { createStore, combineReducers } from 'redux'

const rootReducer = combineReducers(allReducers)

然后把rootReducer 传递给我们的store

//创建store,里面放的是状态state,是状态的容器
const store = createStore(rootReducer)

---

上面的准备工作已经做好了，接下来来进行测试数据
 

//第六步，开始进行数据测试
const cartInitState = {
  cart: [{
    name: 'xiaoming',
    age: 18,
    cost: 300
  }, {
    name: 'zhangsan',
    age: 20,
    cost: 400
  }]
}

将cartInitState赋值给cartReducer，同时新建一个常量ADD_TO_CART

//第七步,定义相关的操作 ======>  增加数据
const ADD_TO_CART = 'ADD_TO_CART';

const productsReducer = function (state = cartInitState, action) {
      return state;
}

-----------------------

未完待续。。。