在react中使用redux(多个reducer)

在react中使用redux(多个reducer)

---

需求概括

这里就是用来说明一下redux的使用，所以随便举了个例子

一、下载redux依赖包

cnpm i redux react-redux redux-thunk -S

二、构建redux目录

---

三、创建一个action(redux)

3.1 创建 redux 核心 store对象 (store.js)

// createStore: 生成store对象， applyMiddleware: 使redux支持异步更行，需要配合 redux-thunk 使用
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

import reducers from './reducers';

const store = createStore(reducers, applyMiddleware(thunk));

export default store;

该操作一个工程只需要执行一次就好了。后面的几步每创建一个新的更新操作都需要重新弄一遍。。。

3.2 创建 action-types (action-types.js)

为什么选择这个当一步呢我？主要是为了明确目标，你们想从哪一个开始弄起都可以

// 修改性别 
export const GENDERCHANGE = "GENDERCHANGE"

使用一个单独的文件来管理action type， 主要的好处就是方便后期的管理与开发，action type 越多，使用起来就约轻便、安全

3.3 创建reducer (reducers.js)

// 这个方法的作用就是用来整合所有的reducer
import { combineReducers } from 'redux'

import { GENDERCHANGE } from './action-types'

// 修改性别
function gender(state = "男", action) {
    switch (action.type) {
        case GENDERCHANGE: return action.data;
        default: return state;
    }
}

export default combineReducers({ gender })
// 这里的话，每加一个reducer，也就是添加一个function，将新的这个function解构在combineReducers包裹的对象中就完事儿了
// 如果还不清楚出就看附上的git链接了。

3.4 创建 action (actions.js)

import { GENDERCHANGE } from './action-types.js';

// 修改性别
export const genderChange = (data) => ({ type: GENDERCHANGE, data });

四、使用 redux

4.1 使用 Provider 包裹最外层组件

我这里最外层组件是 index.js

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

import store from './redux/store';

ReactDOM.render(
  // 这里使用 Provider 包裹最外层组件
  // 同时将我们生成的 store 作为 Provider 参数
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

4.2 组件使用

终于到了。。。
以Gender.jsx 组件为栗子

import React, { Component } from 'react'
import { Card, Radio } from 'antd'
// 引用connect方法，将当前组件与 redux 关联起来
import { connect } from 'react-redux'

import { genderChange } from '../../redux/actions.js'

class Gender extends Component {

    // 改变单选按钮的值
    onChange = (e) => {
        let value = e.target.value;
        // 调用redux方法
        this.props.genderChange(value);
    }

    render() {
        // 获取 redux 状态
        const { gender } = this.props

        return (
            <div className="gender">
                <Card title={<p>redux中性别为：{<span className="redux-value">{gender}</span>}</p>} style={{ width: 350 }}>
                    <Radio.Group onChange={this.onChange} value={gender}>
                        <Radio value="男">男</Radio>
                        <Radio value="女">女</Radio>
                    </Radio.Group>
                </Card>
            </div>
        )
    }
}

export default connect(
    state => ({ gender: state.gender }),
    {
        genderChange
    }
)(Gender)

// 使用 connect 关联，将会把 state(状态) 和 action(方法) 注入到当前类的参数里面(props)
// 使用 this.props.xxx 就可以调用了

这里对于connect的使用我想单独解释一下

export default connect(
    state => ({ gender: state.gender }), // 这里的 state.gender 中的 gender，对应的是redecers.js 中 function 的方法名
    // redux 会将所有的状态(reducer) 封装成一个对象，也就是我们所需要的对象了。其中函数名是键，state的值是值。
    {
        genderChange // 这里的话对应的就是action.js 中的方法了
    }
)(Gender)

线上地址 git仓库