react-redux的简单使用讲解

1.创建react项目

具体创建步骤此处就不再掩饰，有兴趣的可看笔者的另一篇博客【react脚手架搭建项目】

搭建完成后，对项目进行修正以及路由配置

修改后我的目录为:

不必强求一模一样。

2.使用前准备

2.1 插件安装

yarn add redux react-redux -S

2.2 建立文件结构

新建store文件夹，内含actions.js，actionType.js，index.js及reducer.js文件
如下：

文件间的关系：

1. index.js 是主要的文件，在此进行仓库的创建，数据存储在此
2. action.js 是提交给reducer处理的一些方法，就写在这里
3. 这里就是为了方法不写错，减少错误而存在的（方法名字大写）
4. reducer.js 这里是index的管理者，也就是store的管理者，就是处理一些东西的，如改变state的值等

编写文件内容：
index.js

import { createStore } from "redux"; //从redux中解构出创建store需要的方法
import reducer from "./reducer"; //导入编写的reducer文件

const store = createStore(reducer); //完成了reducer的注入,完成store的创建

export default store; //将创建好的store导出以便使用
// 这里是不建立state的值的，这一些都交给管理者reducer来处理，这里是固定写法

reducer.js

//设置默认 state
const defaultState = {
  //在此处创建一些公共的state数据，redux的数据就是存储在此文件
  listValue: "bonnie教你使用react-redux",
  listArr: ["bonnie"],
};

// 此方法默认有两个参数
// 第一个参数就是state，第二个参数是action
export default (state = defaultState, action) => {
  if (action.type === "change_value") {
    //如果类型为 change_value
    //就修改 listValue 的值
    let newState = JSON.parse(JSON.stringify(state));
    newState.listValue = action.value;
    return newState; //返回修改后的新的state
  }
  if (action.type === "add_item") {
    //如果类型为 add_item
    //就向 listArr 里 添加一条数据
    let newState = JSON.parse(JSON.stringify(state));
    newState.listArr.push(newState.listValue);
    return newState;
  }
  return state;
};

3.在项目中使用reacct-redux

3.1 将store注入项目

修改项目入口文件
index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { Provider } from "react-redux"; //Provider提供者
import store from "./views/store"; //引入创建好的 store仓库

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

特别注意：
引入store 的路径，千万不要写错，否则很麻烦

3.2 组件与store关联

profile.jsx

import React, { Component } from "react";

import { connect } from "react-redux";

class Profile extends Component {
  render() {
    return (
      <div>
        <input value={this.props.listValue} onChange={this.props.inputChange} />
        <button onClick={this.props.addItem}>add item</button>
        <ul>
          {this.props.listArr.map((item, key) => {
            return <li key={key}>{item}</li>;
          })}
        </ul>
      </div>
    );
  }
}

//获取 store的 state数据   获取到之后组件内可通过 this.props.***来进行调用
const mapState = (state) => {
  return {
    listValue: state.listValue,
    listArr: state.listArr,
  };
};
//通过dispatch派发reducer里的事件
const mapDispatch = (dispatch) => {
  return {
    inputChange(e) {
      //定义action类型，便于reducer进行相应操作
      let action = {
        type: "change_value",
        value: e.target.value,
      };
      dispatch(action);
    },
    addItem() {
      //定义action类型，便于reducer进行相应操作
      let action = {
        type: "add_item",
      };
      dispatch(action);
    },
  };
};

export default connect(mapState, mapDispatch)(Profile);

此时，就已经将redux与组件进行了绑定。接下来可进行，需要的操作,简单示例一下：

默认效果如图：

对输入框内容进行编辑：

点击按钮：

到此，关于react-redux的简单使用讲解已经结束

注意

注意：
1.创建store以及reducer文件
2.在根文件将store注入项目
3.使用connect将组件与store相关联