关于react.js:react使用redux使用pro

react应用redux应用pro

1.开发环境 react+redux
2.电脑系统 windows10专业版
3.在应用react开发的过程中,我依据我的项目的我的项目可能会应用到状态管理工具,在这里我抉择的是 redux,上面我分享一下在react怎么十一redux!
4.在src目录上面新建 action/reducer/Stroe 文件夹,构造如下:

5.action/index代码如下:

/*
我是一个action的对象
*/

const sendAction=(aa)=>{
    return{
        type:"send_action",
        chen:aa
    }
}

module.exports={
    sendAction
}

6.reducer/index代码如下:

/*
这个文件是创立 reducer 函数的,专门解决 发送过去的 action
*/

const initState = {
    chen: '默认值'
}

const reducer = (state = initState, action) => {
    console.log("resucer:",state,action);
    switch (action.type) {
        case "send_type":
            return Object.assign({}, state, action);
        default:
            return state;
    }
}

module.exports = {
    reducer
}

7.Store/index代码如下:

import { createStore } from "redux";
import {reducer} from '../reducer/index'
const store=createStore(reducer);
export default store;

8.在react模板中增加如下代码:

import React from "react";
import store from '../Store';
import {sendAction} from '@/action'
export default class Home extends React.Component {
    constructor(props) {
        super(props);
        
        // 这个bind办法是必须的，以确保`this`能够在回调函数handleClick中应用
    this.chenget = this.chenget.bind(this);
    }
    // 页面已加载 就申请数据
    chenget(){
        console.log("我是state的数据");
        console.log(store.getState());
        console.log("我是state的数据完结啦");
    }
    componentDidMount(){
    }

    dian =()=>{
        const aa=100;
        const action= sendAction(aa);
        store.dispatch(action);
        //在这里咱们看到了,咱们在 redux 中定义的chen变量的值被批改了
    }

    render() {
        //用一个变量,承受
        const ChenHome =
            <div>
                <p> 我是home </p>
                <p> 我要坏加 </p>
                <a href="#/about" > 去about </a>
                <p onClick={this.dian}>会哦加</p>
            </div>
        //完结啦
        return (ChenHome
        )
            ;
    }
}

9.成果如图:

//依据图,咱们能够得悉,在reducer/index中定义的chen变量被批改啦
10.本期的教程到了这里就完结啦,是不是很nice,让咱们一起致力走向巅峰!