React之Redux工作流程

2019-05-27 Yazzyk

阮一峰

0x00

render函数

render() {
    return (
        <div style={{ width: '500px', padding: '10px' }}>
            <Input
                value={this.state.inputValue}
                style={{ width: "400px", marginRight: "15px" }}
                onChange={this.handleInputChange}
            />
            <Button
                type="primary"
            >
                提交
            </Button>
            <List
                bordered
                dataSource={this.state.list}
                renderItem={item => (
                    <List.Item> {item} </List.Item>
                )}
            />
        </div>
    )
}

0x01

在src下创建store/index.js
这里就创建好了Store

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

const store = createStore();

export default store;

0x02

在src/store下创建reducer.js

const defaultState={};

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

0x03

发送action

handleInputChange(e){
    // console.log(e.target.value);
    const action = {
        type:'input_value_change',
        value: e.target.value
    }
    store.dispatch(action);
}

0x04

检测数据的传递

constructor(props) {
    super(props);
    store.subcribe(this.handleStoreChange)
}
handleStoreChange(){
    this.setState(store.getState());
}
react