redux工作流程及使用方法

流程圖：react組件創建action,通過store.dispatch(action)方法通知store要進行什么操作，因為store本身無法進行改變，需要引入reducer對自身進行管理，reducer進行操作后，返回新的newState給store,store發生改變，組件中數據發生改變。（個人理解，便於復習）

，

1.創建action並使用dispatch方法

import React, { Component } from 'react';
import store from './store'
import TodoListUI from './store/TodoListUI'
import {changeInputAction, addItemAction, deleteItemAction} from './store/actionCreators'

class TodoList extends Component {
    constructor(props){
        super(props)
        console.log(store.getState(),123)
        this.state=store.getState()
        store.subscribe(this.storeChange.bind(this))
        this.changeInputValue=this.changeInputValue.bind(this)
        this.clickBtn=this.clickBtn.bind(this)
        this.deleteItem=this.deleteItem.bind(this)
    }
    render() { 
        return ( 
            <div>
                <TodoListUI
                    inputValue={this.state.inputValue}
                    changeInputValue={this.changeInputValue}
                    clickBtn={this.clickBtn}
                    list={this.state.list}
                    deleteItem={this.deleteItem}
                />
            </div>
         );
    }
    componentDidMount(){

    }
    storeChange(){
        this.setState(store.getState)
    }
    changeInputValue(e){
        const action = changeInputAction(e.target.value)
        store.dispatch(action)
    }
    clickBtn(){
        const action = addItemAction()
        store.dispatch(action)
    }
    deleteItem(index){
        const action=deleteItemAction(index)
        store.dispatch(action)
    }
}
 
export default TodoList;

TodoListUI組件

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

export const TodoListUI =(props)=>{
    return (
        <div style={{ margin: '10px' }}>
            <div>
                <Input
                    placeholder={props.inputValue}
                    style={{ width: '250px', marginRight: '10px' }}
                    onChange={props.changeInputValue}
                    value={props.inputValue}
                >
                </Input>
                <Button type='primary' onClick={props.clickBtn}>
                    增加
                </Button>
            </div>
            <div style={{ margin: '10px', width: '300px' }}>
                <List
                    bordered
                    dataSource={props.list}
                    renderItem={(item, index) => (<List.Item onClick={() => {props.deleteItem(index) }}>{item}</List.Item>)}
                />
            </div>
        </div>

    );
}
export default TodoListUI;

 

2.創建store引入reducer和react dev Tools

import {createStore} from 'redux';
import reducer from './reducer'
const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // 創建數據存儲倉庫,有這個插件則調用這個方法
    );
export default store;

3.reducer對store進行操作

import {CHANGE_INPUT,ADD_ITEM,DELETE_ITEM} from './actionTypes'
const defaultState={
    inputValue:'write something',
    list:[
    'qwewdsfdsfgdg',
    'asdgfasdgfgsg',
    'triyutuettryh',
    ]
}
export default (state = defaultState,action)=>{
    //reducer只能接受state不能改變state
    let newState =JSON.parse(JSON.stringify(state));//深度拷貝
    switch (action.type){
        case CHANGE_INPUT:
            newState.inputValue=action.value;
            return newState
            break;
        case ADD_ITEM:
            newState.list.push(newState.inputValue);
            newState.inputValue='';
            return newState
            break;
        case DELETE_ITEM:
            newState.list.splice(action.index,1);
            return newState
            break;
        
    }
    return state
}

4.actionType 和actionCreatores

 actionType 

export const CHANGE_INPUT ='changeInput';
export const ADD_ITEM ='addItem';
export const DELETE_ITEM ='deleteItem';

actionCreatores

import { CHANGE_INPUT, ADD_ITEM, DELETE_ITEM } from './actionTypes'

export const changeInputAction =(value)=>({
    type:CHANGE_INPUT,
    value
})
export const addItemAction =()=>({
    type:ADD_ITEM,
})
export const deleteItemAction =(index)=>({
    type:DELETE_ITEM,
    index
})