Redux学习

Redux概念:一个帮助我们管理State的容器,是javaScript的状态容器,提供了可预测的状态管理;
redux中的reducer概念:要求是一个纯函数(确定的输入,一定会有确定的输出;没有产生副作用)
比如:slice(纯函数)、splice会对原来的数组修改,不是一个纯函数.
所有React组件都必须像纯函数一样保护它们的props不被修改

  • 核心理念:Store
  • 核心理念:action

所有的数据变化,必须通过派发(dispath)action来更新
action:是一个普通的javascript对象,用来描述这次更新的type和content

const aciont1 = { type:"INC_AGE", index:0 }
const aciont2 = { type:"CHANGE_NAME", playload:{index:0,newName:"haha"} }
  • 核心理念:reducer
  1. 是一个纯函数
  2. 做的事情就是将传入的state和action结合起来生成一个新的state
function reducer(state = initialState, action) {
  switch (action.type) {
    case "INC_AGE":
      return { ...state, counter: state.counter + action.num }
    case "CHANGE_NAME":
      return { ...state, counter: state.counter - action.num }
    default:
      return state
  }
}
export default reducer

三大原则:

1. 单一数据源

  • 整个应用程序的state被存储在一颗object tree中,并且这个object tree只存储在一个 store 中;
  • Redux并没有强制让我们不能创建多个Store,但是那样做并不利于数据的维护;
  • 单一的数据源可以让整个应用程序的state变得方便维护、追踪、修改;
    2.State是只读的
  • 唯一修改State的方法一定是触发action,不要试图在其他地方通过任何的方式来修改State:
  • 这样就确保了View或网络请求都不能直接修改state,它们只能通过action来描述自己想要如何修改state;
  • 这样可以保证所有的修改都被集中化处理,并且按照严格的顺序来执行,所以不需要担心race condition(竟态)的问题
    3.使用纯函数来执行修改
  • 通过reducer将 旧state和 actions联系在一起,并且返回一个新的State;
  • 随着应用程序的复杂度增加,我们可以将reducer拆分成多个小的reducers,分别操作不同state tree的一部分;
  • 但是所有的reducer都应该是纯函数,不能产生任何的副作用;
基本用法参考

store/actionCreators.js

import * as actionTypes from "./constants"

export const addNumberAction = (num) => ({
  type: actionTypes.ADD_NUMBER,
  num
})

export const subNumberAction = (num) => ({
  type: actionTypes.SUB_NUMBER,
  num
})

store/constants.js

export const ADD_NUMBER = "add_number"
export const SUB_NUMBER = "sub_number"

store/reducer.js

import * as actionTypes from "./constants"

const initialState = {
  counter: 100
}

function reducer(state = initialState, action) {
  switch (action.type) {
    case actionTypes.ADD_NUMBER:
      return { ...state, counter: state.counter + action.num }
    case actionTypes.SUB_NUMBER:
      return { ...state, counter: state.counter - action.num }
    default:
      return state
  }
}
export default reducer

store/index.js

import { createStore } from "redux"
import reducer from "./reducer"

const store = createStore(reducer)

export default store

以上写法过期的后续会调整,目前只是基本的思路理解

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容