redux学习与使用

Redux:

主要概念Action，reducer，store，state

原理：dispatch ({ type:action, preload: { val } } ) --->reducer(修改state)

store:

Store 就是把它们(state，action，reducer)联系到一起的对象

• 维持应用的 state；

• 提供 getState() 方法获取 state；

• 提供 dispatch(action) 方法更新 state；

• 通过 subscribe(listener) 注册监听器;

• 通过 subscribe(listener) 返回的函数注销监听器。

  再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合而不是创建多个 store。

state:

在 Redux 应用中，所有的 state 都被保存在一个单一对象中

action:

通过action修改state，action就是一个普通js对象，给出一个action实例：

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

type 字段来表示将要执行的动作, text字段是传递的值

• 强制使用 action 来描述所有变化带来的好处是可以清晰地知道应用中到底发生了什么，

• 为了把 action 和 state 串起来，开发一些函数，这就是 reducer

• reducer 只是一个接收 state 和 action，并返回新的 state 的函数

reducer:

• 不修改原来的state, 使用 Object.assign({}, obj1, obj2) 新建了一个副本,或者es6对象展开运算符的使用，{...state, ...newState}达到相同目的

• 在 default 情况下返回旧的 state。遇到未知的 action 时，一定要返回旧的 state

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
     })
   default:
     return state
 }
}


学习书：
http://caibaojian.com/react/component-lifecycle.html

   http://huziketang.mangojuice.top/books/react/lesson2

 

 

转载于:https://www.cnblogs.com/evaling/p/10318242.html