关于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, 让咱们一起致力走向巅峰!