创建Redux中的仓库-store和reducer

创建Redux中的仓库–store和reducer

一、安装redux

cnpm install --save redux

二、编写代码

tip：Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合 而不是创建多个 store。

1- 安装好redux之后，在src目录下创建一个store文件夹,然后在文件夹下创建一个index.js文件。index.js就是整个项目的store文件：

import { createStore } from 'redux'  // 引入createStore方法
const store = createStore()          // 创建数据存储仓库
export default store                 //暴露出去

2- 此时虽然已经建立好了store仓库，但是这个仓库很混乱，这就需要一个有管理能力的模块，就是Reducer。这两个一定要一起创建出来，这样仓库才不会出现互怼现象。在store文件夹下，新建一个文件reducer.js：

const defaultState = {}  //默认数据
export default (state = defaultState,action)=>{  //就是一个方法函数
    return state  // state: 是整个项目中需要管理的数据信息
}

3- 把reducer引入到store中,再创建store时，以参数的形式传递给store

import { createStore } from 'redux'  // 引入createStore方法
import reducer from './reducer' //引入reducer

const store = createStore(reducer)          // 创建数据存储仓库
export default store                 //暴露出去

4- 在store中为TodoList初始化数据，在reducer.js文件的defaultState对象中，加入两个属性:inputValue和list：

const defaultState = {
    inputValue: 'please input name',
    list: [
        'zhangsan',
        'lisa',
        'vivian',
        'petter',
        'lisi',
        'xiaohua'
    ]
}  //默认数据
export default (state = defaultState, action) => {  //就是一个方法函数
    return state  // state: 是整个项目中需要管理的数据信息
}

5- 获取数据，将之前的代码进行优化修改：

import React, { Component } from "react";  //imrc快捷生成
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd'
import store from './store/index'  //1.引入store

// const data = [
//     'zhangsan',
//     'lisa',
//     'vivian',
//     'petter',
//     'lisi',
//     'xiaohua'
// ]   // 2.数据可删除了，需要从store中获取数据

class TodoList extends Component {   //ccc快捷生成
    constructor(props) {
        super(props);
        console.log(store.getState())  //store 提供 getState() 方法获取 state
        this.state = store.getState() // 3.复制给组件的state
    }
    render() {
        //  4.修改获取数据this.state.XXX
        return (
            <div className="div1">
                <div>
                    Name <Input placeholder={this.state.inputValue} style={{ width:'250px', marginRight:'10px'}}/>
                    <Button type="primary">增加</Button>
                </div>
                <div style={{ margin: '10px', width: '300px' }}>
                    <List
                        bordered  //是否展示边框
                        dataSource={this.state.list}  //列表数据源
                        renderItem={item => (<List.Item>{item}</List.Item>)}  //当使用 dataSource 时，可以用 renderItem 自定义渲染列表项
                    />
                </div>
            </div>
        )
    }
}

export default TodoList;

console.log(store.getState())结果：

三、效果展示