redux

• reducer 接收两个参数： 旧的state 和action: { type, payload } 返回新的state;

reducer是为了规范创建新state的流程的函数

const reducer = (state, action) => {
  switch(action.type){
    case 'xxx':
      const newState = {xxx}
      return newState;
     default:
     return state;
  }
}
export default reducer;

• dispatch dispatch是为了规范setState流程的函数

• connect 将组件与全局状态连接起来，使得组件可以使用state以及dispatch修改state, connect是React-redux提供的。

大致代码
import React, { useMemo } from 'react';
import { connect, appContext, store } from './redux';

const First = () => {
    console.log('第一个render了')
    return (
        <div>第一个<User /></div>
    )
}
const Second = () => {
    console.log('第二个render了')
    return (<div>第二个 <UserModifier>这里是child</UserModifier> </div>)
}

const Last = () => {
    console.log('最后一个')
    return (<div>最后一个了</div>)
}

const User = connect((state) => { return { user: state.user }})((props) => {
    console.log('user===', props);
    return (<div>user: {props.user.name}</div>)
})

const UserModifier = connect()((props) => {
    console.log('UserModifier==', props)
    return <div>
          修改userName:
            <input type="text" 
                onChange={(e) => {
                    props.dispatch({ type: 'updateState', payload: { name: e.target.value }})
                }}
            />
            {props.children}
        </div>
});


export const App = () => {
    const last = useMemo(() => {
        return <Last />
    }, [])

    return (
        <appContext.Provider value={store} >
            <First />
            <Second />
            {last}
        </appContext.Provider>
    )
}

• selector

connect(mapStateToProps, mapDispatchToProps)(component)
mapStateToProps: (state) => { return { login: state.login } } //一个函数 接收的参数是state
mapDispatchToProps: (dispatch) => dispatch({
  type: 'xxx', 
  action: {type: 'xxx', payload: {xx: xxx}}
}) //一个函数， 接收的参数是dispatch,
在connect里面会执行mapStateToProps 和 mapDispatchToProps 这两个函数， 执行完的结果会传给组件，组件就可以通过props来获取到 精简过后的state,也可以获取到dispatch

• connect 的意义

1. mapSTateToProps 和 mapDispatchToProps 以及 connect(mapStateToProps,mapDispatchToProps) 这部分 都是可以进行一个抽取

connect(mapStateToProps,mapDispatchToProps)(component) connect 前面部分封装好了state的读和写，然后后面再接一个组件，这样，就可以和任意的组件进行结合 之所以分成两次调用，先调用一次得到一个半成品，然后再传给任何组件

2. connect其实对传入的组件进行了一层的封装，然后又返回一个封装之后的组件，首先可以从store中拿到state和setState，并且对store进行订阅，store发生了变化的话，就会对组件进行更新操作
3. connect是一个高阶组件

• createStore

• redux 与react-redux的主要思路

1. 首先我们有一个App, 里面有一些组件，父组件下嵌套了子组件，子组件再嵌套子组件
2. 然后想要让每一个组件都可以访问到全局的state
3. redux把state放在store中，store就类似于一个大仓库
4. 为了让组件与state连接起来，react-redux提供了connect,将组件与store连接起来
5. 连接之后，就可以从组件的props中取得state，以及修改state的dispatch

-midlleWare 中间件 就是可以自己去修饰dispatch

1. redux-thunk 会对action进行如果是个function 就执行action(dispatch）,如果不是 就dispatch(action)
2. redux-promise 会对payload进行判断，如果发现payload是个promise的话，就在payload后面接一个then, 拿到result之后的话 再dispatch(result）

关于中间件，