Redux 和React 结合

Posted 2022-08-02 samweb

　　当Redux 和React 相接合，就是使用Redux进行状态管理，使用React 开发页面UI。相比传统的html, 使用React 开发页面，确实带来了很多好处，组件化，代码复用，但是和Redux 接合时，组件化却也带来了一定的问题，组件层层嵌套，有成千上百个，而store确只有一个，组件中怎么才能获取到store?  页面UI就是显示应用程序状态的，如果获取不到store中的state, 那就没法渲染内容了。还有一个问题，就是如果状态发生了变化，组件怎么做到实时监听，实时显示最新的状态？

　　对于第一个问题，React组件中怎么获取到store，你可能想到了, 在整个应用程序的最外层组件中把store 作为props 层层向下传递，对于一个小程序，还可以接受， 但对于一个大型程序呢，不可能成千上百个组件中都写上store 属性吧。还有一个解决方案就是context,  把所有组件包含在一个context中，context 提供store 属性，这样就不用层层传递，且所有的组件都会获取到store.，方案可以一试

　　对于第二个问题，组件内部想要实时显示最新的状态，那就要使用store.subscribe() 方法，在其里面注册监听函数，获取最新状态，然后注入到组件中，组件更新的方法，就是调用setState() 方法，那我们的每一个组件都变成了有状态的组件。那store.subsribe() 方法，什么时候注册监听函数，必须组件加载完就要注册，componentDidMounted 里调用store.subscribe().

　　根据以上两点分析，尝试写一下代码，看不能能实现Redux和React 的接合，使用create-react-app 创建项目react-redux-demo，然后 cd react-redux-demo && npm i bootstrap redux --save，安装boostrap 和redux。 打开项目，在index.js 中引入boostrap. 

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import ‘./index.css‘;
import App from ‘./App‘;
import ‘bootstrap/dist/css/bootstrap.css‘; // 添加bootstrap 样式

ReactDOM.render(<App />, document.getElementById(‘root‘));

　　还是最简单的加减counter 开始，点击add 加1， 点击minus 减1， 点击reset 重置。看一下Redux, 由于Redux 就是action, reducer, store，和React 一点关系都没有，所以完全把创建action，创建stroe的内容写成单独的文件，只暴露出React需要的东西给它调用就好了。React 需要store, 需要action, 因为它要dispatch action来改变状态。简单起见，把redux的有关内容都放到一个文件中，在src目录下新建一个文件redux.js

import createStore from ‘redux‘;
// state 
const initialState =  counter: 5 ;

// action 
const add =  type: ‘ADD‘ ;
const minus =  type: ‘MINUS‘ ;
const reset =  type: ‘RESET‘ ;

// reducer
function counter(state = initialState, action) 
    switch(action.type) 
        case ‘ADD‘: 
            return 
                ...state,
                counter: state.counter + 1
            
        case ‘MINUS‘:
            return  
                ...state,
                counter: state.counter - 1
            
        case ‘RESET‘:
            return 
　　　　　　　　　...state,　
　　　　　　　　　counter: 5
　　　　　　　;
        default:
            return state;
    

// 创建store
const store = createStore(counter);

// export 出去store 和 action
export store, add, minus, reset;

　　现在就要写React，创建页面ui, 先不管交互，先把页面三个按钮和状态的显示画出来，在src下创建一个ThreeButton.js, 

import React,  Component  from ‘react‘

export default class ThreeButton extends Component 
    render() 
        return (
            <div style=textAlign: "center">
                <h1 id="counter">0</h1>
                <button type="button" className="btn btn-primary" style=marginRight: ‘10px‘>Add</button>
                <button type="button" className="btn btn-success" style=marginRight: ‘10px‘>Minus</button>
                <button type="button" className="btn btn-danger">Reset</button>
            </div>
        )
    

　　然后在App.js中引入

import React from ‘react‘;
import ThreeButton from ‘./ThreeButton‘;

function App() 
  return (
    <ThreeButton></ThreeButton>
  );


export default App;

　　 准备实现React和Redux的接合，实现页面的交互。首先就是要把store 注入到React中，使用React 的context api. context使用的最开始，是使用createContext创建一个context,  在src 目录下新建一个storeContext.js

import React from ‘react‘;

const storeContext = React.createContext(store: ) 
export storeContext;

　　storeContext 有一个属性Provider， 它是一个组件，有一个value属性，提供真正的组件共享数据，这里就是Redux 创建的store 了。然后用Provider 把组件包起来，该组件和它的子组件都能够获取到共享数据，那就把App 包起来， 那就在index.js中把Redux的store和storeContext.js 引入

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import ‘./index.css‘;
import App from ‘./App‘;
import ‘bootstrap/dist/css/bootstrap.css‘; // 添加bootstrap 样式

import  store  from ‘./redux‘; // 引入 store

　import storeContext from ‘./storeContext‘; // 引入storeContext

// 提供sotre 作为共享数据，App及其子组件都能获取到store
const Provider = <storeContext.Provider value=store: store> 
        <App />
    </storeContext.Provider>

ReactDOM.render(Provider, document.getElementById(‘root‘));

　　那ThreeButton.js 就可以获取到store, 那具体是怎么获取到store的呢？首先还是引入storeContext， 然后在类中加一个静态属性contextType, 它赋值为storeContext, 然后组件中就可以使用this.context 获取到store 了。

import React,  Component  from ‘react‘;
import  storeContext  from ‘./storeContext‘; // 引入storeContext

export default class ThreeButton extends Component 
    static contextType = storeContext; // 加静态属性contextType, 赋值为storeContext
    
    componentDidMount() 
        let store = this.context; // this.context 获取到store
        console.log(store);
    
    
    render() 
        return (
            <div style=textAlign: "center">
                <h1 id="counter">0</h1>
                <button type="button" className="btn btn-primary" style=marginRight: ‘10px‘>Add</button>
                <button type="button" className="btn btn-success" style=marginRight: ‘10px‘>Minus</button>
                <button type="button" className="btn btn-danger">Reset</button>
            </div>
        )
    

　　可以看到控制台打印出了store. 组件终于获取到store， 那就要从store中获取state，注入组件中，那组件就要声明一个状态 allState 来接收store中的state, 同时在componentDidMounted 的时候，调用setState 给它赋值

　　static contextType = storeContext; // 加静态属性contextType, 赋值为storeContext

    state = 
        allState: 
    
    
    componentDidMount() 
        let store = this.context; // this.context 获取到store
        this.setState(
            allState: store.getState()
        )
    
    

　　把h1 中0 改为从状态获取

 <h1 id="counter">this.state.allState.counter</h1>

　　页面中显示为5，没有问题，表明从store中获取的状态没有问题。那就要给三个按钮添加click 事件了，dispatch action 来改变状态，那就添加三个函数。首先从redux.js中引入三个action , 然后声明三个函数dipatch action， 最后就是给按钮添加上click 事件。

import  add, minus, reset  from ‘./redux‘;
.....

 add = () => 
        let store = this.context;
        store.dispatch(add);
    
    
    minus = () => 
        let store = this.context;
        store.dispatch(minus);
    
    
    reset = () => 
        let store = this.context;
        store.dispatch(reset);
    

...
 <button type="button" className="btn btn-primary" style=marginRight: ‘10px‘
                    onClick=this.add>Add</button>
                <button type="button" className="btn btn-success" style=marginRight: ‘10px‘
                    onClick=this.minus>Minus</button>
                <button type="button" className="btn btn-danger"
                    onClick=this.reset>Reset</button>

　　点击了按钮，页面的状态并没有刷新，那就是没有subscribe 监听状态的改变， 还是在componentDidMounted 页面里面调用store.subscribe，它的回调函数也很简单，就是获取状态，调用setState()

componentDidMount() 
        let store = this.context; // this.context 获取到store
        this.setState(
            allState: store.getState()
        )

        store.subscribe(() => 
            this.setState(
                allState: store.getState()
            )
        )
    

　　至此，react 和redux 算是接合成功了。整个threeButton.js 如下

import React,  Component  from ‘react‘;
import  storeContext  from ‘./storeContext‘; // 引入storeContext
import  add, minus, reset  from ‘./redux‘;

export default class ThreeButton extends Component 
    static contextType = storeContext; // 加静态属性contextType, 赋值为storeContext

    state = 
        allState: 
    
    
    componentDidMount() 
        let store = this.context; // this.context 获取到store
        this.setState(
            allState: store.getState()
        )

        store.subscribe(() => 
            this.setState(
                allState: store.getState()
            )
        )
    
    
    add = () => 
        let store = this.context;
        store.dispatch(add);
    
    
    minus = () => 
        let store = this.context;
        store.dispatch(minus);
    
    
    reset = () => 
        let store = this.context;
        store.dispatch(reset);
    
    render() 
        return (
            <div style=textAlign: "center">
                <h1 id="counter">this.state.allState.counter</h1>
                <button type="button" className="btn btn-primary" style=marginRight: ‘10px‘
                    onClick=this.add>Add</button>
                <button type="button" className="btn btn-success" style=marginRight: ‘10px‘
                    onClick=this.minus>Minus</button>
                <button type="button" className="btn btn-danger"
                    onClick=this.reset>Reset</button>
            </div>
        )
    

　　现在回想一下组件中获取store, dipatch aciton ,和实现实时监听的步骤， 你会发现当我们再创建另外一个组件的时候，它也有好多相同的步骤 ，

　　1 ，添加静态属性contextType，使我们整个组件都能够获取到store，  肯定相同

　　2， 添加state来接受store中的state， 肯定相同。

　　3，componentDidMounted 下获取state ，监听state， 肯定相同

　　4， dispatch action， 这个几乎不相同，因为每一个组件触发的action 不同

　　5，render state, 就是页面的ui, 这个也几乎不同。

　　我们可以把这个组件分为三个部分，相同的部分不动，那不同的部分要怎么处理？对于不同的部分，通常都是使用函数，不同的部分通过传参的形式传递进来，那就要写一个函数，返回这个组件。由于action 和ui 是两个不同类型的东西，可以分为两种不同的参数，那这个函数接受action 返加一个函数，返加函数再接受一个ui 组件，再返回一个组件，这个组件包含相同的部分。相当于

function connect(action) 
    return function(Componnet) 
        return class extends React.componnet 
            // 相同的部分
            render() 
                return <Componnet  ...this.state></Componnet>
            
        
    

　　只要把这个函数封装起来，以后直接调用这个函数，就实现了组件自动获取到store, 自动监听变化，我们只要写ui 和action，然后传递进去就可以了。这个函数其实第三方组件已经封装好了，那就是react-redux 库，它提供了一个connect方法, 看一下它的api, 最常用的就是下面的方式

connect(mapStateToProps, mapDispatchToProps)(MyComponent)。

　　和我们自己写的connect 函数使用方法一致， 只不过它的第一个函数可以接受更多的参数，mapStateToProps, 把state 转化成props，因为connect 返回的组件中能够获取到store中的state, 它要把state 传递给myComponnet, 因为myCompoent 才是负责渲染ui, 对于myComponnet 来说，它就是props. 同理也适用于mapDispatchToProps, 在connect的组件它是能获取到store中的dispatch,  当传递给myComponent的时候，它就变成了Props.  再看一下这两个参数怎么使用，首先它们是函数，然后返回对象。 为什么要这样设计呢？只有函数，才能调用，才能通过参数把state和disptch  进行注入，返回对象，便于对象的合并，把所有对象进行合并，形成props 传递给myComponnet.

　　对于mapStateToProps 来说，它接受一个state作为参数，返回一个对象，这个对象中的属性就可以在myComponet中使用props 进行获取并使用，值呢？就是 参数state中的属性，myComponent 组件要用到state中的哪个属性，就读取state中的哪个属性作为参数。

const mapStateToProps = state => (
    counter: state.counter
)

　　mapDispatchToProps，则相对麻烦一点，它接受一个dispatch 作为参数，返回的对象中属性也是可以在myComponet中使用props 进行获取并使用，值呢，是一个函数，参数可以接受也可以不接受，函数体则是dispatch action

const mapDispatchToProps = dispatch => (
    add: () => dispatch(type: ‘ADD‘)
)

　　React-Redux 除了connect 函数外，还提供了Provider 组件，和我们自定义的storeContext.Provider 一致，不过它的使用方式是直接提供属性，组件身上的属性都能被子组件获取到。npm i react-redux --save 使用react-redux 重写组件。

　　首先把storeContext.js 文件去掉，然后在index.js中从React-Redux引入Provider 组件，包含App

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import ‘./index.css‘;
import App from ‘./App‘;
import ‘bootstrap/dist/css/bootstrap.css‘; // 添加bootstrap 样式

import  store  from ‘./redux‘; // 引入 store
import  Provider  from ‘react-redux‘;

// 提供sotre 作为共享数据，App及其子组件都能获取到store
const ProviderWrapper = <Provider store=store> 
        <App />
    </Provider>

ReactDOM.render(ProviderWrapper, document.getElementById(‘root‘));

　　然后ThreeButton.js 就要分为两部分了，一个部分是connect 函数中的第一部分connect(mapStateToProps, mapDispatchToProps), 主要的作用就是把store 获取，转化为props.

另一部分是connect的第二部分myComponent,  它呢，就是接受到props, 渲染组件。 在一个文件中也可以，分两个文件也没有问题。我们就在一个文件中写了，

import React from ‘react‘;
import  add, minus, reset  from ‘./redux‘;

　import connect from ‘react-redux‘;

// 纯渲染组件
function ThreeButton(props) 
   
    return (
        <div style=textAlign: "center">
            <h1 id="counter">props.counter</h1>
            <button type="button" className="btn btn-primary" style=marginRight: ‘10px‘
                onClick=props.add>Add</button>
            <button type="button" className="btn btn-success" style=marginRight: ‘10px‘
                onClick=props.minus>Minus</button>
            <button type="button" className="btn btn-danger"
                onClick=props.reset>Reset</button>
        </div>
    )


// 把store中的state 转化为纯渲染组件props
const mapStateToProps = state => (
    counter: state.counter
)

// 获取store中的dispatch，同时和action接合，组成纯渲染组件props，渲染组件中,直接调用对象的属性，就可以dispatch action 了
const mapDispatchToProps = dispatch => (
    add: () => dispatch(add),
    minus: () => dispatch(minus),
    reset: () => dispatch(reset)
)

// connect 函数把它们接合起来，ThreeButton就可以使用props来使用mapStateToProps和mapDispatchToProps中返回的对象属性
// 同时返回一个组件，可以在父组件App.js 中直接调用
export default connect(
    mapStateToProps,
    mapDispatchToProps,
  )(ThreeButton)