Redux快速上手之【react-redux基础】

前言

• 细阅此文章大概需要 <math xmlns="http://www.w3.org/1998/Math/MathML"> 3 分钟 \color{red}{3分钟} </math>3分钟左右
• 本篇中讲述了：
  1. react-redux简述
  2. Provider代替Context上下文
  3. connect
• 欢迎在评论区探讨、留言，如果认为有任何错误都还请您不吝赐教，万分感谢。希望今后能和大家共同学习、进步。
• 下一篇会尽快更新，已经写好的文章也会在今后进行不定期的修订、更新。
• 如果觉得这篇文章对您有帮助，还请点个赞支持一下，谢谢大家！
• 欢迎转载，注明出处即可。

---

react-redux简述

react-redux最大的特点，就是让redux的相关操作在react中更简洁，主要影响是在组件应用的环节。

Provider代替Context上下文：【无需再手动通过context引用】

创建好公共容器后，我们无需在基于context手动传递store，react-redux内部帮我们实现了这个能力，我们只需要在根组件和后代组件中引入store即可，无需再关注传递方式。

// 在根节点引入store，基于react-redux传递
import React from 'react';
import ReactDom from 'react-dom';
import App from './view/App';
/*引入redux公共容器*/
import store from './store';
/*不再引入上下文*/
//import AppContext from './AppContext';

/*引入react-redux Provider*/
import {Provider} from 'react-redux';

const root ReactDOM.createRoot(document.getElementById('root'))
root.rnder(
    <Provider store={{store}}> // 基于react-redux Provider传递公共容器
        <App />
    </Provider>
)

connect：【无需手动获取store及公共状态、无需subscript手动更新组件】

最舒服的就是，react-redux的connect方法帮我们实现了以下三点：

1. 使用公共容器无需再手动引入store
2. 获取公共状态无需再使用getState
3. 基于dispatch派发更新公共状态前，无需再手动编写组件更新的方法并subscript到事件池中了

connext的使用

connect函数执行的返回值：

会返回一个函数，执行这个返回的函数，传入一个组件，会返回一个将我们需要的state和action（需要派发的任务的）注入到props中的的新组件

connect函数执行需要传入两个参数：

1. mapStateToProps：可以接收到redux中的公共状态，我们可以把需要的信息作为属性，合并传递给组件即可，在组件中使用时，可以基于props获取。

   const mapStateToProps = (state) => {
       // state:redux公共容器中，所有模块的公共状态
   
       return {
           // 返回的对象中的信息，会作为属性，传递给组件
           moduleA_a: state.moduleA.a
           moduleA_b: state.moduleA.b
           moduleB_states: state.moduleB
           states: state
           //....
       }
   }

2. mapDispatchToProps：把需要派发的任务当作属性传递给组件，接收派发任务的方法【store.dispatch()】 ,配合上一篇讲到的createAction进行使用

   import action  from '../store/actions'
   
   // ...组件内
   const mapDispatchToProps = (dispatch) => {
       // dispatch:redux中派发任务的方法【store.dispatch()】，配合上一篇讲到的createAction进行使用
   
       return {
           // 返回的对象中的信息，会作为属性，传递给组件
           moduleA_fun_adda:()=>{dispatch(action.moduleA.adda)}
           moduleA_fun_addb:()=>{dispatch(action.moduleA.addb)}
           moduleB_fun_addC:()=>{dispatch(action.moduleB.addc)}
           moduleB_fun_addD:()=>{dispatch(action.moduleB.addd)}
           //....
       }
   }

   或者connect函数的第二个参数可以直接简写为一个派发对象，在connect函数内部会通过bindActionCreators将这样的对象直接变为mapDispatchToProps处理后的这种形式

   import action  from '../store/actions'
   
   // ...组件内
   export default connect(null, action.moduleA)(Operator)
   
   // ============等价于下面这种写法================
   const mapDispatchToProps1 = (dispatch) => {
   
       return {
           moduleA_fun_adda:()=>{dispatch(action.moduleA.adda)}
           moduleA_fun_addb:()=>{dispatch(action.moduleA.addb)}
           //....
       }
   }
   
   export default connect(null, mapDispatchToProps1)(Operator)
   
   // ============等价于下面这种写法================
   const mapDispatchToProps2 = (dispatch) => {
       return bindActionCreators(action.moduleA, dispatch)
   }
   
   export default connect(null, mapDispatchToProps2)(Operator)

具体示例

import action  from '../store/actions'

const moduleB = function (props) {

const { moduleA_a, moduleA_b, moduleB_states, moduleB_fun_addc, moduleB_fun_addD } = props
// 解构出注入到组件中的state和action
    console.log(moduleA_a,'moduleA_a')
    console.log(moduleA_b,'moduleA_b')
    console.log(moduleB_states.c,'moduleB_states_c')
    console.log(moduleB_states.d,'moduleB_states_d')
  
   const handleAddC = () => {moduleB_fun_addc()}
   const handleAddD = () => {moduleB_fun_addD()}

  return <div>
      <button onclick={handleAddC}>add C</button>
      <button onclick={handleAddD}>add D</button>
  </div>;
};

const mapStateToProps = (state) => { // 把需要的信息作为属性，合并传递给组件

        return {
            moduleA_a: state.moduleA.a
            moduleA_b: state.moduleA.b
            moduleB_states: state.moduleB
        }
    }
const mapDispatchToProps = (dispatch) => { // 把需要派发的任务当作属性传递给组件

        return {
            moduleB_fun_addc:()=>{dispatch(action.moduleB.addc)}
            moduleB_fun_addD:()=>{dispatch(action.moduleB.addd)}
            //....
        }
    }

export default connect(mapStateToProps,mapDispatchToProps)(moduleB)
// 返回一个注入state和action到props 的新组件