[React] --- redux-actions in the basic use --- [alley]

 

First, install

cnpm install --save redux-actions

 

Second, why use redux-actions

reducer using a switch case statement to determine the type of action, when action many times, reducer content is not so straightforward. redux-actions simplify the reducer and action links

 

Third, the basic use

1. Create action / actionCreator.js

import { createAction } from 'redux-actions';
export const addnum = createAction('ADDNUM')

2, the assembly is introduced using

import React,{Component} from "react";
import store from "./store"
import {addnum} from "./action/actionCreator"

export default class App extends Component{

　　constructor(){

　　　　super()

　　　　this.state = store.getState();

　　　　store.subscribe(this.handleUpdate.bind(this))

　　}

　　render(){

　　　　let {n} = this.state;

　　　　return (

　　　　　　<div>

　　　　　　　　<h2>{n}</h2>

　　　　　　　　<button onClick={this.handleClick.bind(this)}>点击</button>

　　　　　　</div>

　　　　)

　　}

　　handleClick(){

　　　　 store.dispatch(addnum());

　　}

　　handleUpdate(){

　　　　this.setState(store.getState())

　　}

}

3, reducer using

import {handleActions} from 'redux-actions';
const defaultState = {
    n:10
}

export default handleActions({
    ADDNUM: (state, action) => {
        let newState = {...state};
        newState.n++;
        return newState;
    },
}, defaultState)