- redux工作流程
- store.js
建立redux状态仓库
import { createStore, combineReducers } from 'redux';
import {add, deleter} from './Reducers/TodoList';
/**
* 第一个参数是reducers 第二个参数是默认状态
* 所以还得建立reducers reducers主要是负责将新的状态返回到store里面 store负责更新
*/
export default createStore(combineReducers({
add,
deleter
}));
- todolist.js todolist的reducer
注意 reducers不要直接返回修改的state 需要返回的一个新的对象 否则内存地址指向的都是同一处
const states = {
list: [
{id: 1, name: '张三', age: 18},
{id: 2, name: '王五', age: 19},
{id: 3, name: '李四', age: 20},
],
test: 1
};
export const add = (state = states, action) => {
const {list} = state;
switch (action.type) {
case 'addTodoList':
list.push(action.payload);
return {
...state,
list
};
case 'deleteTodoList':
return {
...state,
list: list.filter((item, index) => {
return index !== action.payload
})
};
}
// 返回新的状态
return state;
};
const statesB = {
name: '张三'
};
export const deleter = (state = statesB, action) => {
console.log('deleter reducers')
switch (action.type) {
case 'change':
return {
...state,
name: action.payload
};
}
// 返回新的状态
return state;
};
- Todolist.js 组件实现
import React from 'react';
import store from '../store';
/**
* 如果单独使用redux的话 直接安装redux的包 进行简单状态管理
* 使用store提供subscribe订阅状态更新 状态更新后使用更新组件
*/
class TodoList extends React.Component {
constructor(props){
super(props);
this.state = store.getState();
store.subscribe(this.changeState);
}
changeState = () => {
console.log(11)
this.setState(store.getState())
};
deleter = (index) => {
store.dispatch({
type: 'deleteTodoList',
payload: index
})
};
add = () => {
store.dispatch({
type: 'addTodoList',
payload: {
id: 4,
name: '赵六',
age: 1
}
})
};
change = (e) => {
store.dispatch({
type: 'change',
payload: '王五'
})
};
render() {
const {
list
} = this.state.add;
const {
name
} = this.state.deleter;
console.log(this.state)
return (
<div>
<h1>{name}</h1>
<button onClick={this.add}>增加</button>
<button onClick={this.change}>change</button>
{
list.map((item, index) => {
return <div key={item.id} style={{display: 'flex', justifyContent: "center"}}>
<div>{item.name}</div>
<div>{item.age}</div>
<button onClick={this.deleter.bind(this, index)}>删除</button>
</div>
})
}
</div>
);
}
}
export default TodoList
实现效果:
使用了redux进行状态管理 删除一个用户首先dispatch了一个deleteTodoList的 action 然后在reducer中返回删除后的数据 store更新数据 组件订阅了store的更新后 更新了内部状态 页面更新成功
代码解析:
- 创建Store
createStore(Reducers) 利用Reducers创建一个Store 第二个参数是默认的初始化参数 利
合并多个Reducers。 会将所有reducers执行一遍获取初始状态 如果没有可以利用createStore 第二个参数设置默认参数
只要是dispatch的action 就会触发所有的reducers
const todoApp = combineReducers({
// visibilityFilter,
name1:todos,
})
用getState() 获取的键是导出时候的对应值 即name1 需要注意
- 执行Action
利用创建好的store
Store.dispatch({
type: '', // 即会将这个类型传入reducers的第二个参数 action type为必传
value: '' // 参数随意 一般作用于参数传递
})
- Reducers处理
reducers作为纯函数
function r (prevState, action) {
// 第一个参数是上一次的状态。action是dispatch过来的值
// 返回新的状态给store进行更新
return {
... newState
}
}
注意: action和reducer之间并不存在一对一的关系。一个action是可以被多个模块的reducer处理的,尤其是当模块之间存在关联关系时,这种场景更为常见
本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。