有没有办法在redux中改变另一个文件中组件树之外的状态？

zwghvu4y 于 2022-11-12 发布在其他

关注(0)|答案(2)|浏览(153)

我正在尝试编写一个react.js web应用程序，我正在尝试实现一个特定的特性，它要求我从一个组件之外的文件（也称为非jsx文件）更改状态。这甚至是可能的吗？你是如何做到的？
以下是我所做的一些尝试：
Api脚本：

import store from "./index.jsx";
import foo from "./actions.js";

const state = store.getState();
store.dispatch(foo("Hello world!"));
/*^^^ERROR^^^ Error message: state.dispatch is not a function*/

index.js:

//Importing packages
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App.jsx";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from "./redux/reducers/index.js";

//Redux configuration
export const store = createStore(reducers);

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

reportWebVitals();

任何帮助都将不胜感激！
谢谢你！

更新：我在此代码中发现了另一个问题：当我运行代码时，没有错误，但当我通过按下按钮运行此函数时，出现以下错误：

action of type "AUTH_SIGN_IN", the slice reducer for key "login" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.

redux

来源：https://stackoverflow.com/questions/69819588/is-there-a-way-to-change-the-state-in-redux-outside-the-component-tree-inside-an

2条答案

按热度按时间

kpbpu0081#

你不能像这样用state来dispatch，你可以用store来dispatch。你可以这样做store.dispatch(foo("Hello world!"));。

范例：

import React from "react";
import ReactDOM from "react-dom";
import * as ReactRedux from "react-redux";
import * as Redux from "redux";

function onIncriment() {
  return {
    type: "INCRIMENT"
  };
}

const initialState = {
  counter: 0
};

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case "INCRIMENT": {
      return {
        ...state,
        counter: state.counter + 1
      };
    }
    default:
      return state;
  }
}

const staticReducer = {
  counter: counterReducer
};

let store = Redux.createStore(Redux.combineReducers({ ...staticReducer }));

function App() {
  return <div>Counter value : {store.getState().counter.counter} </div>;
}

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

store.dispatch(onIncriment())

赞(0）回复(0）举报 2022-11-12

9lowa7mx2#

您必须在一个单独的文件中创建存储（我通常有src/store.ts）。您将能够在index.js上导入存储（对于React提供程序），也可以在React之外导入存储，只需store.dispatch(...)。

赞(0）回复(0）举报 2022-11-12