我是 react/redux 的新手。我试图弄清楚 redux 中的所有部分是如何交互的。给我带来麻烦的一件事是理解动作和减速器、存储之间的关系。

我正在使用 redux-toolkitprepare函数来构造最终的有效负载值。

    addTodo: {
      reducer: (state, action) => {
        state.push(action.payload);
      },
      // ERROR: **Type '{ payload: Todo; }' is missing the following properties from type 'Omit<PayloadAction<any, string, any, any>, "type">': meta, errorts**
      prepare: (todoMessage: string): { payload: Todo } => {
        return {
          payload: { message: todoMessage, id: uuid(), completed: false }
        };
      }
    },

如何键入prepare函数来消除打字稿错误？

检查这里的错误。

在阅读React/Redux样板文件时,我遇到了以下代码片段

/components/auth/signout.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as actions from '../../actions'
class Signout extends Component {

    componentWillMount() {
        this.props.signoutUser()
    }

    render() {
        return <div>Bye Bye</div>
    }
}

export default connect(null, actions)(Signout)

/动作/指数/ JS

import axios from 'axios'
import { UNAUTH_USER, AUTH_USER, AUTH_ERROR, FETCH_MESSAGE } from './types'
const ROOT_URL = 'http://localhost:3090'

export function signoutUser() {
    localStorage.removeItem('token')
    return {
        type: UNAUTH_USER
    }
}

问题:有人可以解释为什么动作创建者signoutUser()只需要type: UNAUTH_USER在被调用时返回动作对象,componentWillMount()并且该动作将被神奇地分派？ …

我有一个包含很多嵌套实体的API响应。我使用normalizr来保持redux状态尽可能平坦。
例如。api响应如下所示：

{
  "id": 1,
  "docs": [
    {
      "id": 1,
      "name": "IMG_0289.JPG"
    },
    {
      "id": 2,
      "name": "IMG_0223.JPG"
    }
  ],
  "tags": [
    {
      "id": "1",
      "name": "tag1"
    },
    {
      "id": "2",
      "name": "tag2"
    }
  ]
}

normalizr使用以下给出的模式对该响应进行规范化：

const OpeningSchema = new schema.Entity('openings', {
    tags: [new schema.Entity('tags')],
    docs: [new schema.Entity('docs')]
});

下面是它的外观：

{
  result: "1",
  entities: {
    "openings": {
       "1": {
          "id": 1,
          "docs": [1,2],
          "tags": [1,2]
       }
    },
    "docs": { 
      "1": { 
        id: "1",
        "name": "IMG_0289.JPG"
      }, …

目前，当使用名为 as 的操作类型时 MY_ACTION_TYPE_1 = 'MY_ACTION_TYPE_1'，当它变得非常长时，它会变得完全不可读，因为它从 redux chrome 扩展中的视图中被切断。命名该值的最佳实践是什么？自然语言（即MY_ACTION_TYPE_1 = 'My action type 1'）还是应该始终与上面的变量名称相同？

如果我将操作类型名称值设置为与操作类型变量名称本身不同，是否会出现任何权衡或问题？

即在下面，看到自然语言的换行很好，而全大写的单字方法刚刚被切断。

我仔细阅读了redux-actions教程,并对他们使用(我相信的)解构感到困惑.下面是一个示例(increment&decrement是函数返回的createAction函数).

const { createAction, handleActions } = window.ReduxActions;

const reducer = handleActions(
  {
    [increment]: state => ({ ...state, counter: state.counter + 1 }),
    [decrement]: state => ({ ...state, counter: state.counter - 1 })
  },
  defaultState
);

这是另一个使用的例子:

const { createActions, handleActions, combineActions } = window.ReduxActions;
?
const reducer = handleActions(
  {
    [combineActions(increment, decrement)]: (
      state,
      { payload: { amount } }
    ) => {
      return { ...state, counter: state.counter + amount …

我正在使用React with react-redux和redux-actions.

我有以下减速机一直告诉我

意外的令牌,预期","

但我不确定为什么.

comments.js (reducer):

import { handleActions } from "redux-actions";
import {
  GET_COMMENTS,
  SET_COMMENTS,
  ADD_COMMENT
} from "../constants/actionTypes";

export default handleActions(
  {
    [GET_COMMENTS]: (state, action) => state,
    [ADD_COMMENT]: (state, action) => {
      const comments = {
        ...state.comments,
        action.payload
      };
      return {
        ...state,
        comments
      };
    },
    [SET_COMMENTS]: (state, action) =>
      Boolean(action.payload) ? action.payload : state
  },
  {}
);

导致麻烦的动作是ADD_COMMENT.我尝试过以下几种方法:

[ADD_COMMENT]: (state, action) => {
  ...state,
  comments: {
    ...state,
    action.payload
  }
}

要么

[ADD_COMMENT]: (state, action) …

我来越过这个redux-actions教程,我注意到一个不寻常的语法来创建一个对象方法:

const stringArray = ["STRING_ARRAY"];

const strangeObject = {
  [stringArray]() {
    console.log(stringArray);
  }
};

有人可以命名或解释正在使用的语法功能吗？

我正在尝试将搜索历史保存在react/redux应用程序中(使用redux-actions)我在reducer中制作.我想保存最近的十次搜索,并在开头有最新的搜索.我有一个对象数组,我想(不可避免地)在数组的开头添加一个新对象,并将所有剩余的结果向下移动一个.我也不希望数组增长超过10个元素.我目前只是每次都用这个覆盖初始元素:

[setWorkPermit]: (state, action) => ({
  ...state,
  searchHistory: Object.assign([...state.searchHistory], { [0]: action.payload }),
}),

我希望在ES6中有一个干净的方法来做到这一点.任何接受者？

我有一个actionCreators我/actions/authenticate.js到单独的逻辑行动派出由终极版和组件的反应。

这是我的authenticate.js，这是我的actionCreators

export function login(email, password) { // Fake authentication function
    return async dispatch => {
        dispatch(loginRequest()); // dispatch a login request to update the state
        try {
            if (email.trim() === "test123@nomail.com" && password === "123456") { //If the email and password matches
                const session = { token: "abc1234", email: email, username: "test123" } // Create a fake token for authentication
                await AsyncStorage.setItem(DATA_SESSION, JSON.stringify(session)) // …

我知道redux中的调度操作是同步的.当我从第1行的反应组件向redux发送操作时,我可以100%确定反应组件中的第2行是否具有更新的redux状态？我正在通过调度getGameDataSuccess(data)动作设置游戏数据.我可以100%确定在下一行中新的道具会流下来吗？现在当我console.log(this.props.lostLetters.gameData),我看到新的游戏数据.但我能100%确定这种情况总是如此吗？

getLostLettersGame(this.props.gameCenter.selectedGame.gameId)
              .then((data) => {
                this.props.dispatch(LostLettersActions.getGameDataSuccess(data));
                console.log(this.props.lostLetters.gameData);
                this.generateGame();
              })

如果 Redux 操作实际上并不对数据进行操作而只是返回一个有效负载，为什么它们被称为操作？

除了被分派之外，动作还有其他用途吗，为什么在调用时不分派动作？

这只是未来证明可与多个商店一起使用的应用程序的一种方式吗？

这也产生了对 mapDispatchToProps 的需求，它通常是完全样板代码，用于用调度调用包装动作

通常可以用这个函数来概括，它接受一个动作对象并返回一个 mapDispatchToProps 函数

// mapActionsToDispatchProps.js
const mapActionsToDispatchProps = actions => {
  return dispatch => (
    actions.mapEntries(action => (
      (...args) => dispatch(action(...args))
    )
  )
)
export default mapActionsToDispatchProps

Object.mapEntries示例。

编辑

我看到最后一个关于 mapDispachToProps 主要是样板的问题可以通过直接传递一个动作对象来避免，并且 connect 将为我映射它们。