Redux 核心原理
-
state
this.state ={
todos: [{
text: 'Eat food',
completed: true
}, {
text: 'Exercise',
completed: false
}],
visibilityFilter: 'SHOW_COMPLETED'
}
组件状态改变是因为本身state发生setState（）
-
actionaction对象，描述要对组件的state做什么样的操作
{
type: 'ADD_TODO',
text: 'Go to swimming pool'
}
-
reducer函数通过reducer函数将组件原
state和对state惊醒更改的action传入reducer函数，利用action对stat进行更改，返回新的state。
-
state 有多种状态，需要多个actio、多个reducer函数去做处理
-
reducer函数reducer（原state，action）；
action
{
type: 'ADD_TODO',
text: 'Go to swimming pool'
}
-
生成action的action创建函数
function addTodo(name){
return {
type:"ADD_TODO",
name:name
}
}
-
创建并且提交
dispatch(addTodo(text))
-
创建一个 被绑定的 action 创建函数 来自动 dispatch(创建action，返回action，提交action)
const addTodo = name => dispatch(addTodo(name))
//最终redux提供你得函数
addTodo("add");
React-redux 案例
安装
-
redux
-
react-redux
扫描二维码关注公众号，回复： 9062113 查看本文章
npm install redux react-redux --save
创建工程目录
-
Store 存放与redux相关的文件
-
Actions 存放所有action
-
Reducers 存放reduce
-
actionType.js 存放所有的action的type
-
index.js Redux的入口文件
-
-
Component 存放react组件
引入 Provider
在项目入口文件index.js中引入 Redux 提供的 Provider 组件
ReactDOM.render(
<Provider>
<App />
</Provider>
, document.getElementById('root'));
创建store
在redux的入口文件中，创建store
-
引入createStore和combineReducers
-
createStore：创建store参数：合并后的reducer参数：初始化状态的state（这里写个空对象即可）
-
combineReducers：合并reducer参数：对象（多个reduce组成）
-
import {createStore,combineReducers} from "redux"
import {addTodoItem} from "./Reducers/TodoReducer"
const rootReducer = combineReducers({
addItem:addTodoItem
});
const initialState = {
};
const store = createStore(rootReducer,initialState);
export default store;
创建store完成后，引入index.js,完成应用入口文件：
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));
创建actionType.js文件
actionType.js文件用于保存action对象的type值，因为type值必须为字符串类型，并且在action创建函数和reducer都要用到action的type属性，所以创建actionType.js文件来保存，在使用的时候引入即可：
export const ADD_TODO_ITEM = "add_todo_item";
export const CHANGE_PENDDING = "change_pendding";
export const CHANGE_FINISHED = "change_fininshed";
export const DELETE_ITEM = "delete_item";
创建action.js文件
action.js文件把针对一个state进行操作的action创建函数定义在一起
import {ADD_TODO_ITEM,CHANGE_PENDDING,CHANGE_FINISHED,DELETE_ITEM} from "../ActionType";
export function addTodoList(toDoName){
return {
type:ADD_TODO_ITEM,
itemName:toDoName
}
}
export function penddingToFinished(item){
return {
type:CHANGE_PENDDING,
item:item
}
}
export function finishedToPendding(item){
return{
type:CHANGE_FINISHED,
item:item
}
}
export function deleteItem(item){
return{
type:DELETE_ITEM,
item:item
}
}
创建reducer.js
每一个state对应一个reducer，我们把它定义在一个文件中，并且将组件的初始state也定义在这里，组件默认回去state都是从这个reducer中获取到的
import {ADD_TODO_ITEM,CHANGE_PENDDING,CHANGE_FINISHED,DELETE_ITEM} from "../ActionType"
const initialState = {
pendding:[
// {
// status:false,
// itemName:"王凯学习迷糊了，已经崩盘中。。。"
// }
],
finished:[
// {
// status:true,
// itemName:"Vue学习",
// }
]
}
export function addTodoItem(state=initialState, action){
switch(action.type){
case ADD_TODO_ITEM:
return{
pendding:state.pendding.concat({status:false,itemName:action.itemName}),
finished:state.finished
}
case CHANGE_PENDDING:
state.pendding.map((value,index)=>{
if(value.itemName === action.item.itemName){
state.pendding.splice(index,1);
}
})
return{
pendding:state.pendding,
finished:state.finished.concat({status:!action.item.status,itemName:action.item.itemName})
}
case CHANGE_FINISHED:
state.finished.map((value,index)=>{
if(value.itemName === action.item.itemName){
state.finished.splice(index,1);
}
})
return{
pendding:state.pendding.concat({status:!action.item.status,itemName:action.item.itemName}),
finished:state.finished
}
case DELETE_ITEM:
if(action.item.status){
state.finished.map((value,index)=>{
if(value.itemName === action.item.itemName){
state.finished.splice(index,1);
}
})
}else{
state.pendding.map((value,index)=>{
if(value.itemName === action.item.itemName){
state.pendding.splice(index,1);
}
})
}
return{
pendding:state.pendding,
finished:state.finished
}
default:
return state;
}