标签: redux

我面临这个问题。当我有一个 Axios 调用时，它承诺调度一个操作来更新 redux 并执行回调。但是当执行回调时，redux 状态似乎已经过时了。

我在这里有一个用于演示的沙箱代码

如果单击 getNewDate 按钮，控制台将显示 redux 状态的差异。当 redux 导致重新渲染时，状态将是正确的。

如何在回调期间获得正确的 redux 状态？

通常在 thunk 中你最终会调用其他操作：

const startRecipe = {type: "startRecipe"}\n\nconst reducer = (state, action) => {\n  if (action.type === "startRecipe") { \n    state.mode = AppMode.CookRecipe\n  }\n}\n\nconst getRecipeFromUrl = () => async dispatch => {\n  const res = await Parser.getRecipeFromUrl(url)\n  dispatch(startRecipe)\n}\n

在 redux 工具包中createAsyncThunk，这并不是那么简单。事实上，您可以通过以下操作来改变状态extraReducers：

export const getRecipeFromUrl = createAsyncThunk(\'getRecipeFromUrl\',\n  async (url: string): Promise<RecipeJSON> => await Parser.getRecipeFromUrl(url)\n)\n\nconst appStateSlice = createSlice({\n  name: \'app\',\n  initialState: initialAppState,\n  reducers: {},\n  extraReducers: ({ addCase }) => {\n    addCase(getRecipeFromUrl.fulfilled, (state) => {\n      state.mode …

我有一个数据数组：

data = [ {date: "16/05/2020", value: [ {column: "student", count: 10, value: "abcd" }, 
         {column: "teacher", count: 25, value: "pqrs" }] },
         {date: "17/05/2020", value: [ {column: "student", count: 19, value: "mno" }, 
         {column: "teacher", count: 7, value: "xyz" }] }
        ];

这是列数组：

columns = [{ Header: "Date", accessor: "date"}, 
           { Header: "Column", accessor: "column"},
           { Header: "Count", accessor: "count"},
           { Header: "Value", accessor: "value"}
           ]

我想在React Table中显示图片（表格）中提到的数据。

在 render() 内部，我正在这样做：

              <ReactTable
                data={data}
                columns={columns}
                minRows={0}
                defaultPageSize={25}
              /> …

我正在使用 NextJS 跟踪示例代码 redux 工具包（计数器）并尝试将状态存储到 sessionStorage，它按预期运行，但控制台发出警告
"Warning: Text content did not match. Server: "0" Client: "25"

这是我的 redux 商店：

import counterReducer from "./counterSlice";

const initValue = () => {
  let value = 0;
  if (typeof window !== "undefined") {
    if (sessionStorage.getItem("counter")) {
      value = sessionStorage.getItem("counter");
    }
  }
  return parseInt(value);
};

const preloadedState = {
  counter: {
    value: initValue(),
  },
};

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
  preloadedState,
});

这是我的页面代码：

import { useEffect, useState } from "react";

import { …

我有一个关于使用Redux ToolkitcreateEntityAdapter的问题。

我有一个应用程序，它使用AG 网格库的主/详细信息功能来显示包和包详细信息。应用程序首先加载包数据，然后在扩展每个包行时获取详细数据。

我想用createEntityAdapter规范化的方式管理数据，但我无法弄清楚如何处理详细网格的动态特性。现在，我有一个减速器切片，每次加载一组详细记录时都会创建一个新属性。属性键是id父包行的，因此在加载data包数据和详细数据后，我的切片最终看起来像这样：123

{
  PACKAGES: [{ id: 123, ...otherData }, { id: 124, ...otherData }],
  '123': [{ id: 456, ...otherDetailData }],
}

当用户展开124包行时，会获取该包的详细数据，然后如下所示：

{
  PACKAGES: [{ id: 123, ...otherData }, { id: 124, ...otherData }],
  '123': [{ id: 456, ...otherDetailData }],
  '124': [{ id: 457, ...otherDetailData }],
}

因此，虽然我可以将数据分解PACKAGES到其自己的实体适配器中，但我无法对详细网格执行相同的操作，因为我事先并不了解每个网格。

我想我和这个问题的人有类似的问题。

我考虑过将所有详细数据存储在单个实体适配器中，并由父级维护另一个索引id，但这似乎很难保持同步。

有任何想法吗？这种情况下的最佳实践是什么？

我的应用程序是这样的：

盖茨比计划

index.tsx - 应用程序的入口点 - 我调用

<Provider store={store}>
   <HomePage />
</Provider>

HomePage.js 用途mapStateToProps与用途connect(mapStateToProps)(HomePage)

当然，在我的主页中，我使用了多个 React 组件。我可以利用该商店，读取/写入该商店上发生的任何事情HomePage。

在我的主页上，我有指向 的链接ActivityPage。一旦我点击此页面并登陆那里 - 问题就开始了。

ActivityPage 使用多个子组件来完成任务。如何从 ActivityPage 访问读/写？

我无法useDispatch在商店中写入甚至读取。我可以在我的 ReactDev 工具上看到该商店，但在尝试读/写时，我收到 11 个错误，大部分是沿着我需要用以下内容包装组件的思路：<Provider>

我在 Stack Overflow 上阅读了不同的解决方案，这表明我需要拥有mapStateToProps并使用connect需要访问商店的任何组件。

这是行不通的，因为我特别希望从“新页面”访问商店。我需要为我的子页面创建另一家商店吗？请帮助。 :

设置中间件时出现以下错误。使用 Redux observable/Redux 工具包。关于为什么会发生这种情况有任何意见吗？

遵循以下回购协议设置。 https://github.com/beast911/react-redux-observables-typescript

import systemReducer, {
  getInfoStart,
  getInfoSuccess,
  getInfoFailed,
  addInfoStart,
  addInfoSuccess,
  addInfoFailed,
  editInfoStart,
  editInfoSuccess,
  editInfoFailed,
  deleteInfoStart,
  deleteInfoSuccess,
  deleteInfoFailed,
  completeInfoStart,
  completeInfoSuccess,
  completeInfoFailed,
} from "./system/slice";

import {
  combineReducers,
  configureStore,
  getDefaultMiddleware,
} from "@reduxjs/toolkit";
import { createBrowserHistory } from "history";
import { combineEpics, createEpicMiddleware } from "redux-observable";
import {
  getInfoEpic,
  addInfoEpic,
  completeInfoEpic,
  deleteInfoEpic,
  editInfoEpic,
} from "./system/epics";
import { ActionType } from "typesafe-actions";
import {
  connectRouter,
  routerMiddleware,
  RouterState,
} from "connected-react-router";

type SystemActionsWithPayload =
  | typeof getInfoStart
  | typeof …

我的商店是这样的：

export default configureStore({
  reducer: {
    sequencer: sequencerReducer,
    editMode: editModeReducer,
    tone: toneReducer,
    app: appReducer,
  },
  middleware: (getDefaultMiddleware) => {
    getDefaultMiddleware({ immutableCheck: false });
  },
});

我有一个工作thunk，但我需要这个immutableCheck: false配置。一旦设置，它似乎会覆盖默认的中间件，并且 thunk 不再工作。这是我的想法：

export const modCell = (step, noteOn) => (dispatch, getState) => {
  const selectedSound = getState().editMode.selectedSound;
  dispatch(sequencerSlice.actions.toggleCell({ step, selectedSound }));
};

这是我得到的错误：

Error: Actions must be plain objects. Use custom middleware for async actions.

有任何想法吗？

我遇到了 redux-persist 的问题。我有一个类对象 Employee ，它包含不同的函数和一些私有变量。在我通过并从 redux-persist 恢复后，它只返回 Object，但没有 Employee 类型。如何保留该对象及其类型，以便在检索时可以将其用作 Employee 对象。

我使用 redux 编写了一个简单的添加到购物车功能。当我尝试将产品添加到数组时，它会抛出错误：

state.products.push 不是一个函数。

初始状态

export const INITIAL_STATE = {
  products: []
};

我使用 redux-sauce 来调度该操作。

减速器

export const AddToCart = (state, { item }) => ({
  ...state,
  products: state.products.push(item),
});