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