我的react之路 --4--redux状态管理

redux

在vue使用中，我们会接触到一个全局状态管理工具名字叫做vuex，那么react有吗？答案当然是 有！
首先我们要使用 npm i redux 然后创建store的文件夹再创建index.js 写入

import {createStore} from 'redux'
import reducer from './reducer'
var store = createStore(reducer)
export default store

到了这里还没有结束哟 要在store的文件夹里再次创建reducer.js写入

import { INECREMENT, DECREMENT } from "../actiontype";
const initalState = {
  n: 1,
};
export default (state = initalState, { type, p }) => {
  switch (type) {
    default:
      return state;
  }
};

这样我们就可以使用了在你想用的地方

import store from '../store'
<script>
	let n =store.getState().n  //这里一定要有getState这个方法这个是拿到store的方法
</script>

这个时候就有小伙伴发问了 switch是用来干什么的，switch是一个判断是用来接收 动作例如

import { INECREMENT, DECREMENT } from "../actiontype";
const initalState = {
  n: 1,
};
export default (state = initalState, { type, p }) => {
  switch (type) {
    case INECREMENT:
      return { ...state, n: state.n + p };
    case DECREMENT:
      return { ...state, n: state.n - p };
    default:
      return state;
  }
};

这个时候你只要利用dispatch来进行动作的发送store就会通过判断来知道你究竟是要干什么 加或减，下面是一个完整的点击按钮加减

import React, { Component } from "react";
import store from "../store";  //引入store

class OnCon extends Component {
  render() {
    //ui组件
    let { n, dec, inc } = this.props;
    return (
      <div>
        <button onClick={inc}>+</button> {n}
        <button onClick={dec}>-</button>
      </div>
    );
  }
}
// 下面时容器组件 只是单一的跟store打交道
export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      n: store.getState().n,
    };
    store.subscribe(this.change);  //用subscribe监听每次修改情况
  }
  change = () => {
    this.setState({
      n: store.getState().n, //当store数据修改时会执行这个回调函数
    });
  };
  inc() {
    store.dispatch(type: "INECREMENT",
      p：1);
  }
  dec() {
    store.dispatch(type: "DECREMENT",
      p：1);
  }

  render() {
    return <OnCon n={this.state.n} inc={this.inc} dec={this.dec} />;
  }
}

那么我们每次都引入store再使用会很麻烦 ，有没有更简单的呢？这个时候react-redux就出现了 首先 npm i react-redux
然后在你的入口文件index.js
里面进行引入 配置如下

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import store from "./component/store";  //引入你的store

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

serviceWorker.unregister();

完成以后在你的任意页面使用如下

import { connect } from "react-redux";


export default connect(state => state)(index);

你就会看到这张图

接下来说一下小知识点 之前一直忘记说了
react使用的是jsx语法在这个语法中是不能使用if和for的 使用会直接消失 或者报错所以这个时候判断就要交给三木运算符和map 来进行判断和遍历 。其中当使用遍历时react列表要指定key值
欢迎各位小伙伴留言 公讨