[redux以及react-redux的使用]redux以及react-redux的使用

原创已于 2022-09-07 09:09:56 修改 · 332 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-09-06 16:13:04 首次发布

本文介绍了Redux的基本概念和核心原理，通过创建store、reducer、action以及常量文件展示了Redux的使用步骤。同时，讲解了如何结合react-redux库来实现UI组件与store的连接，包括connect函数的使用。最后，提到了如何在多组件间共享状态，并引入了combineReducers方法。通过实例，深入理解Redux在实际项目中的应用。

一、redux简介

1.redux是一个专门用于做状态管理的js库（不是react插件库）
2.redux是独立存在的

二、redux核心原理图

三、使用redux

下载redux

npm add redux

创建核心js，store.js

//专门用于创建redux中最为核心的store对象
import {createStore} from "redux";
//引入为Count组件服务的reducer
import countReducer from "./count_reduce";

export default createStore(countReducer)

创建reducer.js

import {DECREMENT, INCREMENT} from "./contains";

export default function countReducer(preState,action){
    if (preState===undefined) preState=0
    const {type,data} = action
    switch (type) {
        case INCREMENT:
            return preState+=data;
        case DECREMENT:
            return preState-=data;
        default:
            return preState;

    }
}

创建常量js

/*
* 该模块是用于定义action对象中type类型的常量值，目的只有一个:便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

创建action.js

import {DECREMENT, INCREMENT} from "./contains";

export const createIncrementAction = data =>({type:INCREMENT,data})
export const createDecrementAction = data =>({type:DECREMENT,data})

四、相关api

1.getState()
//获取store中的状态
 <h1>当前求和为：{store.getState()}</h1>
2.dispatch()
//使用reducer
 addBtn1 = () =>{
        const {value} = this.selectNumber
        store.dispatch({type:'increment',data:Number(value)})
    }
 3.subscribe()
//监测redux中状态的变化，只要变化，就调用render
//在index.js中引入store
store.subscribe(()=>{//由于diff算法，不会有效率问题
    ReactDOM.render(
        <BrowserRouter>
            <App/>
        </BrowserRouter>
        ,document.getElementById("root"))
})

五、使用react-redux

安装react-redux

npm add react-redux

创建UI组件

class CountUI extends Component {
    render() {
        return (
            <div>
                <h1>当前求和为：{this.props.count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value={1}>1</option>
                    <option value={2}>2</option>
                    <option value={3}>3</option>
                </select>
                <br/>
                <br/>
                <br/>
                <button onClick={this.incrementCount}>+</button>&nbsp;
                <button onClick={this.decrementCount}>-</button>&nbsp;
                <button onClick={this.incrementCountOdd}>和为奇数时加</button>&nbsp;
                <button onClick={this.incrementCountAsync}>异步加</button>
            </div>
        );
    }

    incrementCount = () =>{
        const {value} = this.selectNumber
        this.props.jia(Number(value))
    }
/*    decrementCount = () =>{
        const {value} = this.selectNumber
    }
    incrementCountOdd = () =>{
        const {value} = this.selectNumber
    }
    incrementCountAsync = () =>{
        const {value} = this.selectNumber
    }*/
}

export default CountUI;

创建容器组件

import {connect} from "react-redux";
import CountUI from "../../components/CountUI";
import {createDecrementAction, createIncrementAction} from "../../redux/count_action";
export default connect(
    state=>({count:state}),
    {
        jia:createIncrementAction,
        jian:createDecrementAction
    }
)(CountUI)

App.js中使用容器组件

import React, {Component} from 'react';
import Count from './containers/Count'

class App extends Component {
    render() {
        return (
            <div>
                <Count/>
            </div>
        );
    }
}

export default App;

在index.js中，使用Provider统一管理（传递）store

import React from "react";
import ReactDOM from 'react-dom'
import {BrowserRouter} from "react-router-dom";
import App from "./App";
import {Provider} from "react-redux";
import store from "./redux/store";
ReactDOM.render(
    <BrowserRouter>
        <Provider store={store}>
            <App/>
        </Provider>
    </BrowserRouter>,
    document.getElementById("root")
)

六、多组件使用redux共享状态

引入combineReducers

import {createStore,combineReducers} from "redux";

汇总reducer

const allReducer = combineReducers({
    myCount:countReducer,
    myPerson:personReducer
})
export default createStore(allReducer)