Store 存储数据

Action修改数据

通过dispatch来修改store数据

Action是一个普通的js对象，包含type和payload 属性

Reducer

reducer是一个纯函数，将curState 和 action结合起来生成新的state

newState = reducer(curState, action)

reducer返回一个新的state而不是修改原有state

function reducer(curState, action) {
  state.name = action.payload.name // 错误
  return { ...curState, name: action.payload.name } // 正确
}

store.dispatch(action) 中的action派发给reducer

参数一：现在的state

参数二：dispatch传入的action

返回值：作为store之后存储的state

每调用一次store.dispatch 就会触发一次reducer

function reducer(curState = initState, action) {
  // 有数据更新返回新的state

  // 没有数据更新，返回state，第一次数据更新，curState为undefined，返回默认值
  return state
}

class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      counter: 0,
    }
  }
  componentDidMount() {
    // subscribe 会在store变化的时候调用。只要 dispatch，就会触发 subscribe。
    store.subscribe(() => {
      const state = store.getState()
      this.setState({ counter: state.counter })
    })
  }
  render() {
    const { counter } = this.state
  }
}

connect 来自react-redux

connect接受两个函数作为参数，返回一个高阶组件

connect的返回值是一个高阶函数

dispatch 的==解耦操作==

通过component来请求数据

component不应该用请求的数据，这样不符合逻辑，因为请求数据应该在redux中完成，而不是在不使用这个数据的组件中完成

redux-thunk

异步处理：

dispatch一个函数，需要用到redux-thunk 这个插件才成dispatch(foo: function)

foo(dispatch, getState)

foo接受两个参数，dispatch和getState，可以在then的回掉里面用

function fetchHomeMultidataAction(){
	function foo(){
	...
  }
  return foo
}

combineReducer的原理（了解）

redux toolkit