# Redux快速上手

目录结构

C:\Users\yompc\Desktop\temp\ReduxDemo\demo01\src>

|   index.js
|   TodoList.js
|
\---store
        index.js
        reducer.js

安装完Redux后在src目录下新建目录store并写好脚手架

//src/store/index.js
import {createStore} from "redux";
import reducer from "./reducer";
const store= createStore(reducer);
export default store
//src/store/reducer.js
const defaultState={
    inputValue:'Write Something',
    list:[1,2,3,4]
}
export default (state = defaultState,action)=>{
    return state
}
# 一、先引入
import store from "./store";
# 二、赋值给state
    constructor(props, context) {
        super(props, context);
        //关键代码
        this.state = store.getState()
        //end
    }
# 三、使用数据
<Input
				//关键代码
	placeholder={this.state.inputValue}
				//end
	style={{ width:'250px',marginRight:'10px',marginLeft:'10px'}}
/>

完整代码

//src/TodoList.js
import React, {Component} from 'react';
import 'antd/dist/antd.css'
import {Input , Button ,List} from "antd";
import store from "./store";

class TodoList extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = store.getState()
    }


    render() {
        return (
            <div style={{margin:'10px'}}>
                <div>
                    <Input
                        placeholder={this.state.inputValue}
                        style={{ width:'250px',marginRight:'10px',marginLeft:'10px'}}
                    />
                    <Button type="primary">提交</Button>
                </div>
                <div style={{ margin:'10px',width:'300px'}}>
                    <List
                        bordered
                        dataSource={this.state.list}
                        renderItem={item => (<List.Item>{item}</List.Item>)} />
                </div>
            </div>
        );
    }
}



export default TodoList;

//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(<TodoList />, document.getElementById('root'));


//src/store/index.js
import {createStore} from "redux";
import reducer from "./reducer";
const store= createStore(reducer);
export default store
//src/store/reducer.js
const defaultState={
    inputValue:'Write Something',
    list:['早8点开晨会,分配今天的任务','早9点和项目经理开需求沟通会','早9点和项目经理开需求沟通会']
}
export default (state = defaultState,action)=>{
    return state
}