三、redux

目录

• 流程和相关api 说明：
  • redux相关API说明：
•  demo:
• demo完善版本：

 

---

回到顶部

流程和相关api 说明：

• 新建react 项目；
• 安装redux:npm install --save redux

redux相关API说明：

    redux中包含: createStore(), applyMiddleware(), combineReducers()

    store对象: getState(), dispatch(), subscribe()

    react-redux: <Provider>, connect()()

redux核心概念(3个)

    action:

        默认是对象(同步action), {type: 'xxx', data: value}, 需要通过对应的actionCreator产生,

        它的值也可以是函数(异步action), 需要引入redux-thunk才可以

    reducer

        根据老的state和指定的action, 返回一个新的state

        不能修改老的state

    store

        redux最核心的管理对象

        内部管理着: state和reducer

        提供方法: getState(), dispatch(action), subscribe(listener)

 

　

 

 

回到顶部

 demo:

项目模板

app.jsx:

import React, { Component } from 'react';
import {INCREMENT,DECREMENT} from '../redux/action-types'
export default class App extends Component {
   
    increment=()=>{
        debugger
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        this.props.store.dispatch({type:INCREMENT,data:number});
    }
    decrement=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        let count = this.props.store.getState()-number;
        if(count>=0){
            this.props.store.dispatch({type:DECREMENT,data:number});
        }
        
    }
    incrementOdd=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        
        if(number%2 == 1){
            this.props.store.dispatch({type:INCREMENT,data:number});
        }
    }
    incrementAsync=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        setTimeout(()=>{
            this.props.store.dispatch({type:INCREMENT,data:number});
        },1000)
    }
    render() {
        let count= this.props.store.getState();
        return (
            <div>
                <p>click {count} item</p>
                <div>
                    <select ref={select=>this.select=select}>
                        <option vlaue="1">1</option>
                        <option vlaue="2">2</option>
                        <option vlaue="3">3</option>
                    </select>
                    <button onClick={this.increment}>+</button>
                    <button onClick={this.decrement}>-</button>
                    <button onClick={this.incrementOdd}>increment if odd</button>
                    <button onClick={this.incrementAsync}>increment async</button>
                </div>
            </div>

        )
    }
}

action-types.js

export const INCREMENT='INCREMENT';

export const DECREMENT='DECREMENT';

reducers.js

/**
 * 这是一个包含n个reducer函数的模块
 */
import{INCREMENT,DECREMENT} from './action-types' 

export  function counter(state=0,action){
    console.log(state);
    console.log(action);
switch(action.type){
    case INCREMENT:
        return state+action.data;
    case DECREMENT:
    return state-action.data;
    default:
        return state
}
}

index.js

import React from "react";
import  ReactDOM from "react-dom";
import App from './component/app';
import {createStore} from 'redux'
import {counter} from './redux/reducers'

//生成一个store对象
const store = createStore(counter);//内部会第一次调用reducer函数得到初始state
function render(){
    ReactDOM.render(<App store={store}/>,document.getElementById("root"));
}
//初始化
render();
//订阅监听，（store 中的状态变化了，就会进行重绘）
store.subscribe(function(){
    render();
})

 

回到顶部

demo完善版本：

index.js优化：store重新创建一个store.js index.js引入即可

import React from "react";
import  ReactDOM from "react-dom";
import App from './component/app';
import store from "./redux/store";
//生成一个store对象
function render(){
    ReactDOM.render(<App store={store}/>,document.getElementById("root"));
}
//初始化
render();
//订阅监听，（store 中的状态变化了，就会进行重绘）
store.subscribe(function(){
    render();
})

store.js：

import {createStore} from 'redux';
import {counter} from './reducers';

const store = createStore(counter);//内部会第一次调用reducer函数得到初始state
export default store;

添加actions.js 来优化app.js中的更新方法;

action.js:

/**
 * 包含所有action creator
 */
import{INCREMENT,DECREMENT} from './action-types'

/** */
export const increment=(number)=>({type:INCREMENT,data:number}); 

export const decrement=(number)=>({type:DECREMENT,data:number}); 

app.js:

import React, { Component } from 'react';
import {INCREMENT,DECREMENT} from '../redux/action-types'
import{increment,decrement} from '../redux/actions'//等同于 import * as actions from '../redux/actions'
export default class App extends Component {
   
    increment=()=>{
        debugger
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        this.props.store.dispatch(increment(number));
    }
    decrement=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        let count = this.props.store.getState()-number;
        if(count>=0){
            this.props.store.dispatch(decrement(number));
        }
        
    }
    incrementOdd=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        
        if(number%2 == 1){
            this.props.store.dispatch(increment(number));
        }
    }
    incrementAsync=()=>{
        let number = this.select.value*1;//this.select.value是字符串，*1 变成number
        setTimeout(()=>{
            this.props.store.dispatch(increment(number));
        },1000)
    }
    render() {
        let count= this.props.store.getState();
        return (
            <div>
                <p>click {count} item</p>
                <div>
                    <select ref={select=>this.select=select}>
                        <option vlaue="1">1</option>
                        <option vlaue="2">2</option>
                        <option vlaue="3">3</option>
                    </select>
                    <button onClick={this.increment}>+</button>
                    <button onClick={this.decrement}>-</button>
                    <button onClick={this.incrementOdd}>increment if odd</button>
                    <button onClick={this.incrementAsync}>increment async</button>
                </div>
            </div>

        )
    }
}

其他文件不变；