redux与react-redux简述

redux中文官网链接：入门 Redux | Redux 中文官网

Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理

react-redux中文官网链接：入门 React Redux | React Redux 中文文档

React Redux 是 Redux 的官方 React UI 绑定库。它使得你的 React 组件能够从 Redux store 中读取到数据，并且你可以通过dispatch actions去更新 store 中的 state

redux可以与各种视图库一起使用，与react-redux或react本身没有任何耦合关系。react-redux的存在，仅为在组件上层传入store，下层组件可以使用store（包括读取数据store.getState()、触发状态改变store.dispatch()等）

redux提供主要api有（仅简单罗列，不做详述，具体可看官网API 参考 | Redux 中文官网）：

• createStore(reducer, [preloadedState], [enhancer])：                                                    创建store:

  getState()
  dispatch(action)
  subscribe(listener)
  replaceReducer(nextReducer)

• combineReducers(reducers):组合分布在多处的reducers
• applyMiddleware(...middlewares)：引入中间件
• compose(...functions)：从右到左把接收到的函数合成后的最终函数
• bindActionCreators(actionCreators, dispatch)：                                                                      没啥用，  惟一会使用到 bindActionCreators 的场景是当你需要把 action creator 往下传到一个组件上，却不想让这个组件觉察到 Redux 的存在，而且不希望把 dispatch 或 Redux store 传给它       
•    

  // SomeComponent.js
  import { Component } from 'react'
  import { bindActionCreators } from 'redux'
  import { connect } from 'react-redux'
  
  import * as TodoActionCreators from './TodoActionCreators'
  console.log(TodoActionCreators)
  // {
  //   addTodo: Function,
  //   removeTodo: Function
  // }
  
  function TodoListContainer(props) {
    // react-redux 注入:
    const { dispatch, todos } = props
  
    // 这是一个很好的 bindActionCreators 用例:
    // 你希望子组件完全不知道 Redux.
    // 我们现在创建这些函数的绑定版本，以便我们可以
    // 之后将它们传给子组件.
  
    const boundActionCreators = useMemo(
      () => bindActionCreators(TodoActionCreators, dispatch),
      [dispatch]
    )
    console.log(boundActionCreators)
    // {
    //   addTodo: Function,
    //   removeTodo: Function
    // }
  
    useEffect(() => {
      // 注意： 这不起作用:
      // TodoActionCreators.addTodo('Use Redux')
  
      // 你只是在调用一个创建 action 的函数。
      // 你也必须同时 dispatch 一个 action！
  
      // 这将起到作用:
      let action = TodoActionCreators.addTodo('Use Redux')
      dispatch(action)
    }, [])
  
    return <TodoList todos={todos} {...this.boundActionCreators} />
  
    //  bindActionCreators 的替代方法
    // 只有向下传递 dispatch 函数, 但是你的子组件
    // 需要 import action creators 并了解它们.
  
    // return <TodoList todos={todos} dispatch={dispatch} />
  }
  
  export default connect(state => ({ todos: state.todos }))(TodoListContainer)

// TodoActionCreators.js
export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

export function removeTodo(id) {
  return {
    type: 'REMOVE_TODO',
    id
  }
}

react-redux主要api有：

 1、Provider，其核心逻辑如下：

const Context = React.createContext();

const Provider = () => <Context.Provider />

2、connect ，用其包裹后，可以使得被包裹的组件获得redux的state状态数据以及action

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

connect返回值是一个高阶组件

// 返回一个可用于包装任何组件的高阶组件
const connectUser = connect(mapState, mapDispatch)

// 返回带有 mergedProps 的 wrapper 组件
// 你可以使用高阶组件让不同的组件获得相同的行为
const ConnectedUserLogin = connectUser(Login)

3、一些hooks，包括useSelector、useDispatch、useStore，实现的前提是用Provider组件包裹外层组件。

源码核心逻辑：

useStore

获取Provider组件传入的store

useSelector

通过store.getState()获取对应的state状态。

useDispatch

简单返回store.dispatch