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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容