React---Redux（二）

安装Redux

npm install redux

使用Redux的state

首先引入redux且引入createStore 创建store。

然后创建reducer 存储库 并且赋予给store

最后在组件中使用store

// 引入redux且引入createStore模块
import {createStore} from 'redux'
//引入笔记本/存储库
import reducer from './reducer'
// 创建store 并且将存储库给store
const  store=createStore(reducer)

export default store;

// state是指存储库里的数据信息
const defaultState={
    inputValue:'2',
    list:[1,2,3]
}

export default (state=defaultState,action)=>{
    return state //要将state送出去

}

import React,{Component,Fragment}from 'react'
import 'antd/dist/antd.css';
import { Input,Button,List } from 'antd';
import store from './store'
class appList extends Component{
    constructor(props){
        super(props)
        this.state=store.getState()
    }
    render(){
        return(
            <Fragment>
                <div style={{marginTop:'10px',marginLeft:'10px'}}>
                    <Input
                        value={this.state.inputValue}
                        placeholder="todoList Info"
                        style={{width:'300px',marginRight:'10px'}}
                    />
                    <Button>提交</Button>
                </div>
                <List
                    style={{width:'300px',marginLeft:'10px',marginTop:'10px'}}
                    bordered
                    dataSource={this.state.list}
                    renderItem={item => <List.Item>{item}</List.Item>}
                />
            </Fragment>
        )
    }

}

export default appList;

操作Reducer的action

首先当要操作Reducer中的数据时要用action标识去操作，先创建一个action对象且必须说明type属性，

然后利用store.dispatch(action)将action传递给store 且reducer会自动接收到action

然后根据action.type属性做不同的操作，且操作时不能改变原有的state 需要先将原有的state深拷贝 最后返回出新的state

注意 为了让组件跟随store做变化，要订阅store变化触发一些函数。从而更新组建的state

// state是指存储库里的数据信息
const defaultState={
    inputValue:'2',
    list:[1,2,3]
}
// reducer可以接受state 但不能修改state
export default (state=defaultState,action)=>{
    //首先当接收到action时 要分情况操作
    if(action.type==='input_change'){
        // 然后将之前的state深拷贝
        const newState=JSON.parse(JSON.stringify(state))
        newState.inputValue=action.value
        // 定义一个新的state传递出去
        return newState;
    }
    if(action.type==='update_item'){
        const newState=JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue=''
        return newState
    }

    return state //要将state送出去

}

import React,{Component,Fragment}from 'react'
import 'antd/dist/antd.css';
import { Input,Button,List } from 'antd';
import store from './store'
class appList extends Component{
    constructor(props){
        super(props)
        this.state=store.getState()
        this.handleInputChange=this.handleInputChange.bind(this)
        this.updateSate=this.updateSate.bind(this)
        this.handleButtonClick=this.handleButtonClick.bind(this)
        //store.subscribe是指组件订阅store 当store发生变化可以触发一些事件
        store.subscribe(this.updateSate)
    }
    render(){
        return(
            <Fragment>
                <div style={{marginTop:'10px',marginLeft:'10px'}}>
                    <Input
                        value={this.state.inputValue}
                        placeholder="todoList Info"
                        style={{width:'300px',marginRight:'10px'}}
                        onChange={this.handleInputChange}
                    />
                    <Button onClick={this.handleButtonClick}>提交</Button>
                </div>
                <List
                    style={{width:'300px',marginLeft:'10px',marginTop:'10px'}}
                    bordered
                    dataSource={this.state.list}
                    renderItem={item => <List.Item>{item}</List.Item>}
                />
            </Fragment>
        )
    }
    handleInputChange(e){
        //先创建一个action对象 且action必有一个type
        const action={
            type:'input_change',
            value:e.target.value
        }
        //将action传递给store rducer将自动接收action
       store.dispatch(action)
    }
    updateSate(){
        //当组件感知到reducer发生变化 组件自动改变state并重新获取数据
        this.setState(store.getState())
    }
    handleButtonClick(){
        const action={
            type:'update_item',
        }
        store.dispatch(action)
    }

}

export default appList;