Redux 去改变store中的数据

一、创建store
index.js

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

const store = createStore(reducer);

export default store;

reducer.js

const defaultState = {
    inputValue: '123',
    list: [1,2]
}

export default (state = defaultState, action) => {
    return state;
}

TodoList.js

constructor(props) {
  this.state = store.getState();
}
render() {
 <div>
    <Input 
    value={this.state.inputValue} 
    placeholder="输入info" 
    style={{width: '300px', marginRight: '10px'}}
    onChange={this.handleInputChange}
    />
  <Button type="primary" onClick={this.handleButtonClick}>提交</Button>
  <List
    style={{marginTop:'10px', width:'300px'}}
    bordered 
    dataSource={this.state.list}
    renderItem={(item, index) => (<List.Item onClick={this.handleItemDelete.bind(this, index)}>{item}</List.Item>)}
    />
</div>
}

二、首先在组件中创建action, 将值传给store,再传给reducer；reducer进行数据的更改返回给store。store拿到reducer返回给它的数据后，自己进行一个更新。

handleInputChange(e) {
   const action = {
       type: 'input_change_vaule',
       value: e.target.value
   }
   store.dispatch(action);
}

handleButtonClick() {
   const action = {
       type: 'add_todo_item'
   }
   store.dispatch(action);
}

handleItemDelete(index) {
   const action = {
     type: 'delete_todo_item',
     index
   }
   store.dispatch(action);
}

reducer.js中对接收到的actiion的type来进行判断。

const defaultState = {
    inputValue: '123',
    list: [1,2]
}

//reducer 可以接受state， 但是绝不能修改state
export default (state = defaultState, action) => {
    if(action.type === 'input_change_value') {
        const newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.value;
        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;
}

三、store将更改后的数据传给Component。
在constructor中使用store中的subscribe方法监控数据改变时就触发。

constructor (props) {
   super(props);
   this.state = store.getState();
   this.handleInputChange = this.handleInputChange.bind(this); 
   this.handleStoreChange = this.handleStoreChange.bind(this);
   this.handleButtonClick = this.handleButtonClick.bind(this);
   store.subscribe(this.handleStoreChange);
}

handleStoreChange() {
  this.setState(store.getState());
}