工作原理
React Component 是页面上的组件 (借书的用户)
Store 是存储数据的公共区域(相当于图书馆的管理员)
Action Creators 数据传递的过程(当在图书馆借书的时候说的话做的事)
Reducers 记录本 (还书和借书的地方)
可以通过npm或者是 yarn
npm
npm install --save react-redux
yarn
yarn add react-redux
因为使用的是redux, 所以所有的数据都存在store之中 在src的目录下创建一个名为store的文件夹 在创建一个index.js
在index.js 文件当中我们这样去写:
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
这个这样理解 store是一个图书的管理员 它需要一个笔记本去帮忙管理这些图书 所以在store文件夹目录下面创建 reducer.js reducer是一个纯函数
//这个数据的初始值
import { CHANGE_VALUE, SUBMIT_TYPE, SPLICE_TYPE, INIT_LIST_ACTION} from '../ActionTypes';
const defaultState = {
values: '',
list: []
};
export default (state = defaultState , action) =>{
if(action.type === CHANGE_VALUE){
const newState = JSON.parse(JSON.stringify(state));
newState.values = action.values;
return newState;
}
if(action.type === SUBMIT_TYPE){
const newState = JSON.parse(JSON.stringify(state));
newState.list.push(newState.values);
newState.values = '';
return newState;
}
if(action.type === SPLICE_TYPE){
const newState = JSON.parse(JSON.stringify(state));
newState.list.splice(action.index, 1);
return newState;
}
if(action.type === INIT_LIST_ACTION){
const newState = JSON.parse(JSON.stringify(state));
newState.list = action.data;
return newState;
}
return state;
}
创建一个组件 test.js和store同级
import React, { Component } from 'react';
import { Button, Input, List} from 'antd';
import store from './store';
// import { getInputChangeAction, getInputSubmitAction, getInputListAction} from './actionCreators';
import { getInputChangeAction, getInputSubmitAction, getInputListAction, getInitList} from './actionCreators';
import { CHANGE_VALUE, SUBMIT_TYPE, SPLICE_TYPE, GET_INIT_LIST} from './ActionTypes';
class test extends Component{
constructor(props){
super(props);
this.state= store.getState();
this.submit = this.submit.bind(this);
this.changes = this.changes.bind(this);
this.handChange =this.handChange.bind(this);
this.listClick =this.listClick.bind(this);
store.subscribe(this.handChange);
}
componentDidMount(){
}
changes(e){
let type = CHANGE_VALUE;
let values = e.target.value;
const action = getInputChangeAction(type, values);
store.dispatch(action);
}
handChange(){
this.setState(store.getState());
}
submit(){
let type = SUBMIT_TYPE;
const action = getInputSubmitAction(type);
store.dispatch(action);
}
listClick(index){
let type = SPLICE_TYPE;
const action = getInputListAction(type, index);
store.dispatch(action);
//immutable: state 不允许我们做任何的改变 不能直接改state 做性能优化使用的
// 父 -> 子 属性传值 this.props去接收
// 子 -> 父 属性传函数名并且改变this的指向 this.props去调用父组件的方法 this.props.zzz(this.props.dddd)
}
render(){
return (
<div>
<div>
<Input
value={this.state.values}
placeholder= 'todo list'
onChange ={this.changes}
style={{ width: '200px', height: '30px'}} />
<Button
onClick ={this.submit}
type="primary"
>提交
</Button>
</div>
<List
style={{ width: '200px'}}
bordered
dataSource={this.state.list}
renderItem={item => (<List.Item onClick={this.listClick}>{item}</List.Item>)}
/>
</div>
)
}
}
export default test;
和test.js同级创建actionCreators.js和ActionTypes.js ，ActionTypes.js是为了写一个声明变量的地方,方便代码管理和优化 写一个共同区域 调用时导入即可
actionCreators.js:
export const getInputChangeAction = (type, values) => ({
type,
values
})
export const getInputSubmitAction = (type) =>({
type
})
export const getInputListAction = (type, index) =>({
type,
index
})
export const initListAction = (type , data) =>({
type,
data
})
export const getInitList = (type) =>({
type,
})
ActionTypes.js
export const CHANGE_VALUE = 'change_value';
export const SUBMIT_TYPE = 'submit_type';
export const SPLICE_TYPE = 'splice_type';
export const INIT_LIST_ACTION = 'init_list_action';
export const GET_INIT_LIST = 'get_init_lst';
redux 中间件
中间件顾名思义就是谁和谁的中间, 在图中 View在Redux会派发一个Action， Action通过Store的Dispatch方法派发给Store, Store接收到Action 连同之前State 一同传给Reducer Reducer会返回一个新的数据给Store Store然后去改变自己的State 这个是Redux的标准流程
Redux的中间件的中间是指 Action 和 Store 之间的关系
Action 只能是一个对象 派发Store 这个是在没有使用redux-thunk情况下, 在使用redux-thunk
Action 可以为一个函数 所以Dispatch方法就是Action和Store的中间件 就是对Dispatch方法的封装
利用react-thunk对Dispatch方法进行封装 这时给Dispatch传入是一个对象 它会直接把这个对象传给Store 如果Dispatch传入是一个函数的话 先执行 然后会根据你传入的参数不同进行不同的事情
