redux使用

redux使用

1. 安装redux
   npm install redux -s

2. 新建一个todolist.js文件

import React, {Component} from 'react';
import {Input, Button, List} from 'antd'
import 'antd/dist/antd.css';
import store from './store/index'
import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from "./store/actionType"
import {getInputChangeAction,getAddItemAction,getDeleteItemAction} from './store/actionCreators'

class TodoList extends Component {
    constructor(props) {
        super(props);
        //store.getState() 获取到store里所有的数据内容
        this.state = store.getState();
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleStoreChange=this.handleStoreChange.bind(this)
        this.handleBtnClick=this.handleBtnClick.bind(this)
        //订阅store的改变，只要改变就会触发回调函数
        store.subscribe(this.handleStoreChange);
    }

    render() {
        return (
            <div>
                <div style={{margin: '10px'}}>
                    <Input
                        placeholder='todo info'
                        value={this.state.inputValue}
                        style={{width: '300px', marginRight: '20px'}}
                        onChange={this.handleInputChange}
                    />
                    <Button type="primary" onClick={this.handleBtnClick}>提交</Button>
                </div>
                <List
                    style={{width: '300px', marginLeft: '10px'}}
                    bordered
                    dataSource={this.state.list}
                    renderItem={(item,index) => (
                        <List.Item onClick={this.handleItemDelete.bind(this,index)}>
                            {item}
                        </List.Item>
                    )}
                />
            </div>
        )
    }

    handleInputChange(e) {
        //创建一个action
        const action=getInputChangeAction(e.target.value)
        //将action传递给store
        store.dispatch(action)
    }
    //重新从store中取数据，替换掉之前的数据
    handleStoreChange(){
        this.setState(store.getState())
    }
    handleBtnClick(){
        const action=getAddItemAction()
        store.dispatch(action)
    }
    handleItemDelete(index){
        const action=getDeleteItemAction(index)
        store.dispatch(action)
    }
}

export default TodoList;

3. 新建一个store文件夹，文件夹里新建第一个文件index.js

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

//createStore创建store
const store = createStore(
    reducer,
    //为了在浏览器里控制台的redux显示，所以要加下面这句话
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

4. 文件夹第二个文件是reducer.js

import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from "./actionType"

const defaultState = {
    inputValue:'',
    list:[]
};

//state是指store里的所有数据
//reducer 可以接收state，但是绝对不能修改state   reducer里面不能有异步的操作以及与时间相关的操作
//store 拿到reducer返回的数据，自己进行了更新
//纯函数指的是，给定固定的输入，就一定会有固定的输出，而且不会有任何的副作用
export default (state = defaultState, action) => {
    if (action.type===CHANGE_INPUT_VALUE) {
        //const newState=JSON.parse(JSON.stringify(state)) 深拷贝  reducer里面必须要有这一步
        const newState=JSON.parse(JSON.stringify(state));
        newState.inputValue=action.value;
        //将最新数据返回到store
        return newState
    }
    if (action.type===ADD_TODO_ITEM){
        const newState=JSON.parse(JSON.stringify(state));
        newState.list.push(newState.inputValue);
        newState.inputValue=''
        return newState;
    }
    if (action.type===DELETE_TODO_ITEM){
        const newState=JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index,1);
        return newState
    }
    return state;
}

5. 文件夹第三个文件是actionType.js

export const CHANGE_INPUT_VALUE="change_input_value";
export const ADD_TODO_ITEM="add_todo_item";
export const DELETE_TODO_ITEM="delete_todo_item";

6.文件夹第四个文件是actionCreateors.js

import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM} from './actionType'

export const getInputChangeAction=(value)=>({
    type:CHANGE_INPUT_VALUE,
    value
})

export const getAddItemAction=()=>({
    type:ADD_TODO_ITEM
})

export const getDeleteItemAction=(index)=>({
    type:DELETE_TODO_ITEM,
    index
})