Redux笔记

三大原则

1.Redux应用只维护一个全局的应用对象
2.应用状态只读。任何时候修改应用状态，必须发送一个action
3.Reducer必须是纯函数，因此，在reducer接收到action时，不能直接修改原来的状态对象，而需要创建一个新的状态对象。

纯函数不依赖任何在程序过程中可能改变的变量
函数执行不会修改外部对象

// action携带了来自input的输入值value，对【创建的新的状态对象进行修改并返回】
    let newState = JSON.parse(JSON.stringify(state))

Reducer

1.reducer是一个形式为(state, action) => state的普通函数

2.reducer是真正对应用状态做出修改的单元，如何修改状态的信息来自action

3.reducer是不能直接对传入的状态对象【state】进行修改，需要创建一个新的状态对象返回

/* ★★★
 1.reducer是一个形式为(state, action) => state的普通函数
 2.reducer是真正对应用状态做出修改的单元，如何修改状态的信息来自action
 3.reducer是不能直接对传入的状态对象【state】进行修改，需要创建一个新的状态对象返回
  */
export default (state = defaultState, action) => {
  console.log(state, action);
  console.log(JSON.stringify(action) + 'wujianxing');
  // Redux里只能接收state，不能改变state,也就是原则二
  if (action.type === "addtodo") {
    // action携带了来自input的输入值value，对【创建的新的状态对象进行修改并返回】
    let newState = JSON.parse(JSON.stringify(state))
    newState.inputValue = action.value
    return newState
  }
  return state
}

store

1.store是Redux中的一个对象，是reducer和action之间的桥梁

2.下面的reducer返回了state【未变化的值】/newState【新的状态对象】

3.store的作用：

3.1.保存应用状态

3.2.通过store.getState()访问应用状态

3.3.通过dispatch(action)发送更新状态的意图

--→这里与action联系，action传递了如何修改应用状态的信息；
--→action对象中的type作为判断【如何修改应用状态】的信息进行设置；

3.4.通过subscribe()注册监听函数、监听应用状态

/* ★★★★store
1.store是Redux中的一个对象，是reducer和action之间的桥梁
2.下面的reducer返回了state【未变化的值】/newState【变化了的值】
3.store的作用：
  3.1.保存应用状态
  3.2.通过store.getState()访问应用状态
  3.3.通过dispatch(action)发送更新状态的意图
    --→这里与action联系，action传递了如何修改应用状态的信息；
    --→action对象中的type作为判断【如何修改应用状态】的信息进行设置；
  3.4.通过subscribe()注册监听函数、监听应用状态
 */

const store = createStore(reducer)

Action

1.你应该把要做的修改变成一个普通对象，这个对象被叫做 action，而不是直接修改 state。修改的事情由Reducer来做。

//Reducer
(state, action) => state

2.Action 是把数据从应用传到 store 的有效载荷。

store.dispatch(action)

3.实例

// action一般放在函数中返回
    function addTodo(text) {
      return {type: 'Add_Todo', text}
    }
    // 当需要修改state时，通过dispatch方法发送action
    store.dispatch(addTodo('吃完100个馒头'))

    // 接下来，处理数据的事情将交给reducers处理

图解

Redux Flow

最后编辑于：2020.09.02 09:53:05