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相關聯