一、Action的认识
简单点说Action就是一个对象，一个必须带key为type的对象[value是自己定义的]，其他的key就根据用户自己喜好自己定义:
以下都是action的定义
- 1、{type:”ADD”}
- 2、{type:”ADD”,key1:”“,key2:”“}
项目中Action函数的简单代码：
export const loginOut = () => {
return (dispatch) => {
dispatch({
type: "LoginOut",
});
}
}
二、Reducer的认识
仅仅是一个称呼，纯函数，函数名自己随便定义都可以，但是函数的参数只能是state与action,可以简单的理解为一个工厂函数，传递一个旧的state通过加工后产出一个新的state：
简单的代码如下：
function count(state = 0, action) {
switch (action.type) {
case 'ADD':
return state + 1;
case 'REDUCER':
return state - 1;
default:
return state;
}
}
如果当state是对象的时候上面的代码是错误的:
-
redux里面规定state是不能修改的。 - 在
javascript中对象是引用数据类型，当你修改了state的时候，变化前后的两个state将会指向同一个地址的，react-redux就会以为这两个相同的state，因为不会执行渲染 - 解决办法，我们用
Object.assign去处理，如有不清楚Object.assign，请参考Object.assign文档
项目中Reducer的简单代码：
export default User = (state = initState, action) => {
switch (action.type) {
case 'Logout':
return { ...state, ...{ data: null } }
default:
return state;
}
};
三、Store的认识
store是一个全局对象，将action和reducer以及state联系在一起，主要职责:
- 维护应用的state
- 提供getState()方法获取state
- 提供dispatch(action)方法更新state
- 通过subscribe(方法)注册监听器
四、上面三者的使用案例
'use strict';
import {createStore} from 'redux';
function count(state = 0, action) {
switch (action.type) {
case 'ADD':
return state + 1
case 'REDUCER':
return state - 1;
default:
return state
}
}
let store = createStore(count);
let currentValue = store.getState();
console.log('当前的值:', currentValue);
//定义一个监听的方法
let listener = () => {
const previosValue = currentValue;
currentValue = store.getState();
console.log('上一个值:', previosValue, '当前值:', currentValue)
}
//创建一个监听
store.subscribe(listener);
//分发任务
store.dispatch({type:"ADD"});
store.dispatch({type:"ADD"});
store.dispatch({type:"ADD"});
store.dispatch({type:"REDUCER"});
五、Action创建函数
action创建函数的意思就是创建一个action的函数，函数返回一个对象
function add(){
return{
type:"ADD",
}
}
function reducer() {
return{
type:"REDUCER",
}
}
- 使用的时候直接store.dispatch(add());就可以
- action创建函数的意义:
1.action创建函数表面是返回一个对象
2.真正的意义在于逻辑的封装
六、redux-thunk中间件的认识
redux-thunk中间件可以让action创建函数先不返回一个action对象，而是返回一个函数，函数传递两个参数(dispatch,getState),在函数体内进行业务逻辑的封装
function add() {
return {
type: 'ADD',
}
}
function addIfOdd() {
return (dispatch, getState) => {
const currentValue = getState();
if (currentValue % 2 == 0) {
return false;
}
//分发一个任务
dispatch(add())
}
}
项目中用到的实例
//reducer
export const shopCar = (state = initState, action) => {
switch (action.type) {
case 'GetShopCartCount':
return { ...state, ...{ goodsCount: action.data.count } };
default:
return state
}
}
//action
export const GetShopCartCount = ()=>{
return (dispatch, getState) => {
let state = getState();
let User = state.User;
if(User.data){
API.shopCartCount(User.data.id,(data)=>{
dispatch({
type: 'GetShopCartCount',
data
})
})
}
}
}
七、使用方式
- 安装:
npm install redux-thunk --save-dev - 导入thunk:
import thunk from 'redux-thunk' - 导入中间件:
import {createStore,applyMiddleware} from 'redux' - 创建store：
let store = createStore(reducer函数，applyMiddleware(thunk)) - 激活redux-thunk中间件，只需要在
createStore中加入applyMiddleware(thunk)就可以
完整代码如下:
'use strict';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
function count(state = 0, action) {
switch (action.type) {
case 'ADD':
return state + 1;
case 'REDUCER':
return state - 1;
default:
return state;
}
}
const store = createStore(count,applyMiddleware(thunk));
//action创建函数
function add() {
return {
type: 'ADD',
}
}
function reducer() {
return {
type: 'REDUCER'
}
}
function addIfOdd() {
return (dispatch, getState) => {
const currentValue = getState();
if (currentValue % 2 == 0) {
return false;
}
dispatch(add())
}
}
function addAsy(delay = 2000) {
return (dispatch, getState) => {
setTimeout(() => {
dispatch(add())
}, delay)
}
}
//获取当前值
let currentValue = store.getState();
//创建一个监听
store.subscribe(() => {
const previosValue = currentValue;
currentValue = store.getState();
console.log('上一个值:', previosValue, '当前值:', currentValue)
});
//分发任务
store.dispatch(add());
store.dispatch(add());
store.dispatch(add());
store.dispatch(add());
store.dispatch(reducer());
store.dispatch(addIfOdd());
store.dispatch(addAsy());
参考：https://blog.csdn.net/jimolangyaleng/article/details/76640309
