一、安装
npm install --save redux;
二、新建目录管理redux
三、./redux/index.js
// 创建store仓库,reducer注入
import {createStore} from 'redux'
import reducer from "./reducer"
const store =createStore(reducer);
export default store;
// store 是唯一的
// 只有store能改变state,reducer不能
四、./redux/actionTypes.js
export const CAHNGEINPUTVALJUE ="changeInputValue";
export const INPUTFOCUS ="inputFocus";
export const ADDITEM ="addItem";
export const DELITEM ="delItem";
export const GETLISTACTION ="getList";
五、./redux/actions.js
import {
CAHNGEINPUTVALJUE,
INPUTFOCUS,
ADDITEM,
DELITEM,
GETLISTACTION
} from './actionTypes.js';
export const changeInputAction = value => ({
type: CAHNGEINPUTVALJUE,
value
});
export const addListAction = value => ({
type: ADDITEM,
value
});
export const delItemAction = value => ({
type: DELITEM,
value
});
export const inputFocusAction = value => ({
type: INPUTFOCUS,
value
});
export const getListAction = value => ({
type: GETLISTACTION,
value
});
六、./redux/reducer.js
import {
CAHNGEINPUTVALJUE,
INPUTFOCUS,
ADDITEM,
DELITEM,
GETLISTACTION
} from './actionTypes.js';
// 定义了一些固定的数据
const defaultState = {
inputValue: 'Write Something',
list: [
'早上8点开晨会,分配项目',
'早上9点开晨会,分配项目',
'早上10点开晨会,分配项目',
'早上11点开晨会,分配项目'
]
};
// Reducer里只能接收state,不能改变state;
// Reducer 是纯函数--纯函数是指返回值有参数决定的函数;
export default (state = defaultState, action) => {
if (action.type === CAHNGEINPUTVALJUE) {
let newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.value;
return newState;
}
if (action.type === INPUTFOCUS) {
let newState = JSON.parse(JSON.stringify(state));
newState.inputValue = '';
return newState;
}
if (action.type === ADDITEM) {
let newState = JSON.parse(JSON.stringify(state));
newState.list.push(newState.inputValue);
newState.inputValue = '';
return newState;
}
if (action.type === DELITEM) {
let newState = JSON.parse(JSON.stringify(state));
newState.list.splice(action.value, 1);
return newState;
}
if (action.type === GETLISTACTION) {
let newState = JSON.parse(JSON.stringify(state));
newState.list=action.list;
return newState;
}
return state;
};
七、React的UI组件的封装:TodeListUI.js
import React from 'react';
import { Input, Button, List } from 'antd';
// 无状态组件:没有业务逻辑的纯UI组件;
const TodoListUI = props => {
return (
<div>
<div style={{ margin: '10px' }}>
<Input
placeholder={props.inputValue}
style={{ width: '350px', marginRight: '10px' }}
value={props.inputValue}
onFocus={props.inputFocus}
onChange={props.changeInputValue}
onKeyUp={props.enterAddList}
></Input>
<Button type="primary" onClick={props.addList}>
增加
</Button>
</div>
<div style={{ margin: '10px', width: '450px' }}>
<List
bordered
dataSource={props.list}
renderItem={(item, index) => (
<List.Item
key={index}
actions={[]}
onClick={() => {
props.delItem(index);
}}
>
{item}
</List.Item>
)}
/>
</div>
</div>
);
};
export default TodoListUI;
八、React的UI组件对应的JS文件封装
import React, { Component } from 'react';
import 'antd/dist/antd.css';
import TodoListUI from './TodeListUI';
import store from './redux';
import {
changeInputAction,
inputFocusAction,
addListAction,
delItemAction,
getListAction
} from './redux/actions.js';
const IconText = ({ icon }) => (
<span>
{React.createElement(icon, {
style: { color: '#1890ff', fontSize: '16px' }
})}
</span>
);
class TodoList extends Component {
constructor(props) {
super(props);
//获取store里面的值
this.state = store.getState();
this.storeChange = this.storeChange.bind(this);
this.inputFocus = this.inputFocus.bind(this);
this.enterAddList = this.enterAddList.bind(this);
this.addList = this.addList.bind(this);
this.delItem = this.delItem.bind(this);
// 订阅模式-将store中数据的改变同步到组件
this.changeInputValue = this.changeInputValue.bind(this);
store.subscribe(this.storeChange);
}
render() {
return (
<TodoListUI
inputValue={this.state.inputValue}
inputFocus={this.inputFocus}
changeInputValue={this.changeInputValue}
enterAddList={this.enterAddList}
addList={this.addList}
list={this.state.list}
delItem={this.delItem}
/>
);
}
storeChange() {
this.setState(store.getState());
}
changeInputValue(e) {
const action = changeInputAction(e.target.value);
store.dispatch(action);
}
inputFocus() {
const action = inputFocusAction();
store.dispatch(action);
}
enterAddList(e) {
if (e.keyCode === 13) {
this.addList();
}
}
addList() {
const action = addListAction();
store.dispatch(action);
}
delItem(index) {
const action = delItemAction(index);
store.dispatch(action);
}
}
export default TodoList;