Redux 不更新商店答案

【问题标题】：Redux not updating storeRedux 不更新商店
【发布时间】：2020-08-19 12:29:10
【问题描述】：

我正在学习 redux，但我在从商店更新数据时遇到问题。

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import App from "./App";

const store = configureStore({
  reducer: counter
});
function counter(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
  console.log(store.getState());
}

function App() {
  return (
    <div>
      <p>{store.getState()}</p>
      <button onClick={() => store.dispatch({ type: "INCREMENT" })}>
        Increment
      </button>
    </div>
  );
}

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

由于某种原因，store.getState() 保持不变，尽管 redux 开发工具中有可见的更新

Redux dev tools view

Stackblitz：https://stackblitz.com/edit/react-p8vm7h?file=src/index.js

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

还有一个选择，我建议你去他们网站上查看Redux的基础教程，你需要让React知道你的状态。

import React from "react";
import ReactDOM from "react-dom";
import { Provider, connect } from "react-redux";
import { createStore } from "redux";
import store from "./App.js";
import App from "./App";

const store = createStore(counter);

function counter(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}

const mapStateToProps = state => {
  return {
    count: state
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onIncrementClick: () => {
      dispatch({type: "INCREMENT" })
    }
  }
}

const App = connect(mapStateToProps, mapDispatchToProps)(
  function AppComponent(props) {
  return (
    <div>
      <p>{props.count}</p>
      <button onClick={props.onIncrementClick}>
        Increment
      </button>
    </div>
  );
});

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

【讨论】：

请注意最好通过props访问调度，即props.dispatch(...)。该组件可能无法像本例那样直接访问商店。
@AtanasB 请注意，当您使用多个操作、reducer 和组件时，文档中有一种更有条理的方式来定义 action 和 reducer :)

【解决方案2】：

因为react 不知道商店正在发生变化。您需要使用react-redux 提供的钩子，它将您的组件绑定到redux 状态，以便您可以监听您的redux 状态的变化。

import React from "react";
import ReactDOM from "react-dom";
import { Provider, useSelector, useDispatch } from "react-redux";
import { createStore } from "redux";
import store from "./App.js";
import App from "./App";


function counter(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
}

const store = createStore(counter);

function App() {
  const counter = useSelector(state => state);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{counter}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>
        Increment
      </button>
    </div>
  );
}
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

【讨论】：