Redux之redux-actions的使用

快来打我* 2022-05-20 09:04 302阅读 0赞

# 1：作用： #

当我们的在开发大型应用的时候，对于大量的action，我们的reducer需要些大量的swich来对action.type进行判断。

redux-actions可以简化这一烦琐的过程，它可以是actionCreator，也可以用来生成reducer，

其作用都是用来简化action、reducer。

主要函数有createAction、createActions、handleAction、handleActions、combineActions。

## createAction ##

原来创建action:

const action = { type: START };

使用redux-actions创建action:

import { createAction } from 'redux-actions';
      const action = createAction(START);
    注：
      export const increment = createAction('INCREMENT')
      export const decrement = createAction('DECREMENT')
    等于：
     increment() // { type: 'INCREMENT' }
     decrement() // { type: 'DECREMENT' }

##  ##

## handleActions ##

> 作用：redux框架下的reducer操作state，主要使用switch或if else来匹配
> 
> 原来reducer操作state写法要使用switch或if else来匹配:

原来的reducer

使用 redux-actions 操作 state

const timer = handleActions({
      START: (state, action) => ({ ...state, runStatus: true }),
      STOP: (state, action) => ({ ...state, runStatus: false }),
      RESET: (state, action) => ({ ...state, seconds: 0 }),
      RUN_TIMER: (state, action) => ({ ...state, seconds: state.seconds + 1 }),
    }, defaultState);

# 2：地址 #

[    https://redux-actions.js.org/][https_redux-actions.js.org]

# 3：安装 #

> $ npm install --save redux-actions
> 
> or
> 
> $ yarn add redux-actions

[https_redux-actions.js.org]: http://https//redux-actions.js.org/