1.Redux学习1，Redux

 

Redux流程图如上：

Action就是一条命令

Store顾名思义就是存储数据的，

Reducers是一个回调函数用于处理数据，它处理完数据会返回给Store存储起来

基本流程就是：组件中用Store.dispach(action), 告诉Store要更新的数据，Store无法直接处理，而是将原本的数据和Action一起发送给Reducers处理，

Reducers根据Action命令来修改原本的数据，更新完数据就返回给Store存储起来。

看下面实例：

1.创建store文件夹，在文件夹下创建index.js,代码如下：

import {createStore} from "redux"
import reducer from "./reducer"

const store = createStore(
    reducer,
　　// 启动redux控件
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

export default store

2.在store文件夹下，创建reducer.js文件，代码如下

const defaultState = {
    inputValue: "",
    list: []
}
//注意reducer只能复制state不能修改，不能直接修改state
export default (state=defaultState,action)=>{
    if(action.type === "change_input_value"){
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    if(action.type === "add_todos_item"){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ""
        return newState
    }
    if(action.type === "delete_todos_item"){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index,1)
        return newState
    }
    return state
}

在store文件夹同级创建todolist.js文件，代码如下：功能做一个简单的增删操作

import React,{Component} from "react"
import 'antd/dist/antd.css'
import { Input,Button,List} from 'antd'
import store from "./store"

export default class TodoList extends Component{
    constructor(props){
        super(props)
        this.state = store.getState()
        store.subscribe(this.handleStoreChange)
    }
    render(){
        return (
            <div>
                <div style={{margin:10}}>
                    <Input
                        value={this.state.inputValue}
                        onChange={this.handleInputChange}
                        style={{width:300,marginRight:10}}
                        placeholder="todo info"
                    />
                    <Button onClick={this.handleBtnClick} type="primary">Primary</Button>
                </div>
                <List
                    style={{width:300,margin:10}}
                    size="large"
                    bordered
                    dataSource={this.state.list}
                    renderItem={(item,index) => <List.Item onClick={this.handleItemClick.bind(this,index)}>{item}</List.Item>}
                />
            </div>
        )
    }
    handleInputChange=(e)=>{
        const action = {
            type: "change_input_value",
            value: e.target.value
        }
        store.dispatch(action)
    }
    handleStoreChange=()=>{
        this.setState(store.getState())
    }
    handleBtnClick=()=>{
        const action = {
            type: "add_todos_item"
        }
        store.dispatch(action)
    }
    handleItemClick=(index)=>{
        const action = {
            type: "delete_todos_item",
            index
        }
        store.dispatch(action)
    }
}

 注意有三个原则：

我们只能创建一个store，作为公共数据区域，不能创建多个。

只有store能够改变自己的数据，所以reducer并不能改变传入的state，而是每次返回新的数据，由store自己更改

reducer必须是一个纯函数，纯函数：1.传入固定的参数，就返回固定的内容，这意味着像new Date这种数据不能返回。2不会有任何副作用，副作用是指，不能对传入的数据做任何修改，就像state，你不能更改它，只能复制它。