react-redux

在这里实现一个简单的功能，点击按钮数字加一

一、项目初始化

第一步 新建一个react项目

$ npx create-react-app 项目名称

第二步 删除项目中不需要的文件

第三步 运行项目

$ cd 项目名称
$ npm run start
或者
$ npm start

第四步 要使用react-redux需要下载相关依赖

$ npm install react redux react-redux
or
$ yarn add react redux react-redux

第五步 创建reducer

首先需要新建一个reducer文件夹，在此文件夹下创建一个index.js文件

// state可以设置默认值
const initState = {
    count: 0,
}

const reducer = (state = initState, action) => {
    return state
}

export default reducer;

第六步 创建store

首先需要新建一个store 文件夹，在此文件夹下创建一个index.js文件

import { createStore } from 'redux';
// 导入创建好的reducer
import reducer from './reducer';

// 把reducer作为参数传递给store
const store = createStore(reducer);

export default store;

第七步 在app.jsx中导出store

import { Provider } from 'react-redux';
import store from './store';

function App() {
    return (
        <Provider store={ store }>
            <div className="App">
                // ...
            </div>
        </Provider>
    );
}

export default App;

二、构建项目内容

第一步 构建组件

一共有两个组件，一个是数字，一个是按钮。首先确认，数字组件属于接收方，用来接收数据；按钮组件属于发送方，用来提醒reducer改变store中的数据，从而达到数字的改变。

• 接收方

// 从reducer中拿到数据，渲染到该组件中
import React from "react";
import { connect } from "react-redux";

function Number(props) {
    let { count } = props;
    return (
        <div>{ count }</div>
    );
}

const mapStateToProps = state => {
    return state;
}

export default conncet(mapStateToProps)(Number);

• 发送方

import React from "react";
import { connect } from "react-redux";

function ButtonHandler(props) {
    let { addHandler } = props;
    return(
        // + 代表 + 号
        <button onClick={ () => addHandler() }>&#43;</button>
    );
}

const mapDispatchToProps = action => {
    return {
        addHandler: () => {
            action({
                type: "add_action",
            })
        }
    }
}

export default connect(null, mapDispatchToProps)(ButtonHandler)

第二步 在reducer中判断传递过来的action

const initState = {
    count: 0,
}

const reducer = (state = initState, action) => {
    switch(action.type) {
        case: "add_action":
        return {
            count: state.count + 1,
        }
        default:
            return state;
    }
}

export default reducer;