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,)

        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:}}>

                    <Input

                        value={this.state.inputValue}

                        onChange={this.handleInputChange}

                        style={{width:,marginRight:}}

                        placeholder="todo info"

                    />

                    <Button onClick={this.handleBtnClick} type="primary">Primary</Button>

                </div>

                <List

                    style={{width:,margin:}}

                    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，你不能更改它，只能复制它。

巴特西

1.Redux学习1，Redux

最新文章

热门文章