理解redux

Redux 是React生态中重要的组成部分。很多人都说，简单的应用可以不用此工具。但是我个人认为，中小型应用使用的话，可以使文件结构更加规范，代码可读性更强。因为React提出将展示组件与容器组件分离的思想，所以降低了React 与Redux之间的耦合度。

 

网上广为流传的Redux流向图，可以帮助我们更好地理解并使用。

                        

Redux Flux.png

我个人粗浅的理解是：
Store的角色是整个应用的数据存储中心，集中大部分页面需要的状态数据；
ActionCreators ,view 层与data层的介质；
Reduce ，接收action并更新Store。
所以流程是 用户通过界面组件 触发ActionCreator，携带Store中的旧State与Action 流向Reducer,Reducer返回新的state，并更新界面。

所以也可以按照这个流程思想，来构建代码的结构了。

 

实现一个很简单的结构.png

上图实现的就是输入输出的东西。输入框内输入一些内容，confirm后，label显示相应内容。

最开始
先安装几个库

npm install --save prop-types
npm install --save react-redux
npm install --save redux

1、首先构造界面

component/AddName.js

-这是一个纯React代码 ，结构清晰。

//component/AddName.js
import React, { Component } from 'react';
import PropTypes from 'prop-types'

class AddName extends Component {
  //声明属性
  static propTypes = {
    lastname:PropTypes.string.isRequired,
    addNameCreater:PropTypes.func.isRequired,
    lastage:PropTypes.number.isRequired,
    addAgeCreater:PropTypes.func.isRequired,
    addNameAsync:PropTypes.func.isRequired
  }
//点击事件
  handlerFunc = () =>{
    const inputName = this.refs.inputValueTest.value;
    this.props.addNameCreater(inputName);
  }
  handlerAgeFunc = () =>{
    const inputage = this.refs.inputValueAge.value;
    this.props.addAgeCreater(inputage);
  }
  handlerAsyncFunc = () =>{
    const inputName = this.refs.inputValueTest.value;
    this.props.addNameAsync(inputName);
  }
//渲染界面
  render() {
    const {lastname,lastage} = this.props;   
    return (
      <div>
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <label> {lastname} </label><br/>
        <input ref="inputValueTest" /><br/>
        <button onClick={this.handlerFunc}>confirm</button><br/>

        <label> {lastage} </label><br/>
        <input ref="inputValueAge" />
        <button onClick={this.handlerAgeFunc}>confirm</button><br/>

        <button onClick={this.handlerAsyncFunc}>Async Confirm</button><br/>
      </div>
    );
  }
}

export default AddName;

---

2、然后，根据流程图，我们需要定义一些操作了，也就是ActionCreator.它会传达用户的操作信息以及一些数据

先定义一些常量供我们使用,这里就两种操作，一是添加名字，二是添加年龄，实际都一样。为了后面实现reducer的合并强行写了俩。这写常量一般都定义在actionTpye文件中

Redux/actionType.js

export const ADDNAME = 'ADDNAME'
export const ADDAGE = 'ADDAGE'

接着就是写ActionCreator ，定义了一些操作类型，告诉store自己是干什么的，需要什么样的数据。

Redux/actions.js

import { ADDNAME,ADDAGE } from "./action-type";

//包含所有的action creator
export const addNameCreater = (name) =>({type:ADDNAME,data:name})
export const addAgeCreater = (age) => ({type:ADDAGE,data:age})
export const addNameAsync = (name) =>{
    return dispatch =>{
        setTimeout(()=>{
            dispatch(addNameCreater(name))
        },2000);
    }
}

3、Reducer 会接收到action的信息。将会进行状态（数据）的处理，相当于react中的setState()的功能。如果有多个reducer ，可以使用combineReducers方法将其合并，并暴露出去。

Redux/reducer.js

//包含n个reducer函数的模块
import {ADDNAME, ADDAGE} from './action-type'
import {combineReducers} from 'redux'
function addName(state='initRedux',action){ //形参默认值
    switch(action.type){
        case ADDNAME:
            return action.data
        default:
            return state
    }
}
function addAge(state=0,action){
    switch(action.type){
        case ADDAGE:
            return action.data
        default:
            return state
    }
}

export const finalReducer = combineReducers({
    addName,addAge
})

其中state='initRedux' 、state=0 相当于我们在React组件内部初始化state.

4、一切操作还是基于Store 的。类似于中央集权。所以还要把Store建立出来

Redux/store.js

import {createStore,applyMiddleware} from 'redux'
import {finalReducer } from './reducers'
import thunk from 'redux-thunk'
//生成store对象
const store = createStore(finalReducer,applyMiddleware(thunk));//内部会第一次调用reducer函数，得到初始state 

export default store

因为reducer会更新Store中的状态（数据），所以需要引入reducer ，并创建store.

到此，流程图到这里就走完了。不过2、3、4都是redux中负责接管React 状态的功能。1是React负责展示的组件。两者并没啥关系。既然有了展示组件，接下来就要有容器组件了。也就是能够将React与redux相关联的一个组件。

5、构建容器组件

containers/App.js

import React from 'react'
import {connect} from 'react-redux'
import {addNameCreater,addAgeCreater,addNameAsync} from '../redux/actions'
import AddName from '../component/AddName'
export default connect(
    state => ({
        lastname:state.addName,
        lastage:state.addAge
    }),
    {addNameCreater,addAgeCreater,addNameAsync}
)(AddName)

这里用到了react- redux中的connect 。可以将React与redux关联起来。AddName就是第一步写的组件名。state中关联了React中的属性。这里面涉及到两个API，到第二章详细描述。

6、添加store

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'

import App from './containers/App'
import store from './redux/store'

ReactDOM.render((
//使用Provider 组件将APP主组件包裹住，这样内部组件都有Store种提供的属性。
    <Provider store={store}>
        <App/>
    </Provider>
), document.getElementById('root'));

这样就OK了。

文件结构.png

上图是主要的文件结构，
-redux 集中管理状态（数据）
-component 专注于React 展示组件部分
-containers 集中处理React与redux交互的部分

此外，redux还可以处理一些异步请求。这样的话。可以做到data 和view 的管理分离，增强了工程结构的可读性与可维护性。