React 之 Redux的基本使用

2020-03-11 本文已影响0人鹤仔z

什么是Redux

Redux 是基于 JavaScript 的状态容器，提供可预测化的状态管理。Redux是一个相当于对flux进行了二次封装的产物，解决了flux中的一些弊端。如果你了解flux，那么看懂本篇文章对你而言就像看懂我脸上的英俊一样容易。

Redux的工作流程

Redux工作流程

基础配置

安装Redux，并在 src 目录下创建 store 文件夹

cnpm install redux -S
在 store 文件夹内创建 index.js 文件——创建公共的内存空间
```
// 引入 creatStore 方法，用来创建公共的内存空间
import { createStore } from 'redux'

// 用 createStore 方法创建内存空间并导出
const store = createStore();

export default store;
```
createStore：
1. 是一个函数，专门用来创建公共的内存空间
2. 参数是一个回调函数 reducers，必须是一个纯函数（不对外界产生影响的函数）
在 store 文件夹内创建 reducers.js 文件，导出一个函数作为 createStore 的回调函数
- 当前函数必须是一个纯函数
  
  纯函数的概念：
  
  不对外界产生影响，即传入的参数在纯函数内不会被改变。
  
  输入一定，输出也一定：纯函数的调用参数相同，则永远返回相同的结果
- 当前函数必须有一个默认的state
- 当前函数必须要返回一个state
- 当前函数内部的state只可读，不可改
- 这个函数中有2个参数
  1. state
    
    没有初始值，所以需要自己定义一个初始值
  2. action
    
    有初始值
store/reducers.js 文件中：
```
// 定义一个初始的state，用来存储初始数据
const defaultState = {
    n:10
}

export default (state=defaultState,action)=>{
    return state;
}
```
store/index.js 文件中：
```
import {createStore} from 'redux'

// 引入reducers函数，并作为参数传递给createStore
import reducers from './reducers'

const store = createStore(reducers);

export default store;
```

关于store

在需要使用公共状态管理的地方进行引入 store ，直接输出，会发现它是个对象，身上有几个方法：

store

store.getState()

用来获取公共状态 store 中的数据
store.dispath(action)

发送 action ，提交修改信息。

store.dispatch(action) 触发之后，赋值给了 reducers 中的 action
store.subscribe(callback)

侦听 store 的更新，绑定一个更新视图的函数

在组件中使用数据

通过 store.getState() 获取

import React, { Component } from 'react'
import store from './store'

export default class App extends Component {
    constructor(){
        super();
        // 直接获取并赋值
        this.state = store.getState();
    }
    render() {
        return (
            <div>
                <h2>{this.state.n}</h2>
            </div>
        )
    }
}

组件中修改数据

在组件中，通过 store.dispatch 传递修改的 action 信息

import React, { Component } from 'react'
import store from './store'

export default class App extends Component {
    constructor(){
        super();
        // 直接获取并赋值
        this.state = store.getState();
    }
    render() {
        return (
            <div>
             <h2>this.state.n</h2>
                <button onClick={this.handleClick.bind(this)}>点击增加</button>
            </div>
        )
    }
    handleClick(){
        // action 一般要单独存储在一个静态文件里，在此引入并使用，为了方便直接写了。
        let action = {
            type:"NUM_ADD"
        }
        
        // `store.dispatch(action)`  触发之后，赋值给了 `reducers` 中的 `action` 
        store.dispatch(action)
    }
}

在 reducers.js 中，根据接收到 action 的 type，做对应的操作。

// 定义一个初始的state，用来存储初始数据
const defaultState = {
    n:10
}

export default (state=defaultState,action)=>{
    switch(action.type){
        case "NUM_ADD":
            // 因为state不能修改，所以先进行浅拷贝，操作拷贝之后的state
            let numState = Object.assign({},state);
            numState.n++;
            return numState;
            break;
    }
    return state;
}

在更改状态的组件内，用 store.subscribe 进行状态变化的侦听，用来更新视图

import React, { Component } from 'react'
import store from './store'

export default class App extends Component {
    constructor(){
        super();
        this.state = store.getState();
        store.subscribe(this.handleUpdate.bind(this));
    }
    render() {
        return (
            <div>
             <h2>this.state.n</h2>
            </div>
        )
    }
    handleUpdate(){
        this.setState(store.getState)
    }
}

至此，一个相对完整的 Redux 的基本使用流程就结束了。

使用多个公共状态

依赖： combineReducers

combineReducers 可以将多个 reducer 合并起来，类似于 vuex 中的 modules 。

从而达到一个 store 管理多个公共状态（flux的弊端之一）

在 store/index.js 文件中：

import { createStore, combineReducers } from 'redux'

// 引入多个reducers函数，并用 combineReducers 进行合并
import reducer1 from './reducer1';
import reducer2 from './reducer2';
const reducers = combineReducers({reducer1,reducer2})

const store = createStore(reducers);

export default store;

然后即可通过 store.getState().模块名 对不同公共状态进行调用。