# 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
}