Reactjs Redux不更新数组

从React上下文移动到Redux可能我错过了一些东西 我只想用ADD_FAV类型操作更新一个数组

databaseReducer.js

import FOOD from "../../data/db/food";
import { ADD_FAV, FETCH_FOOD, SET_LOADING } from "../actions/DatabaseActions";

const initialState = {
  food: FOOD,
  favorites: [],
  loading: false,
};

export default (state = initialState, action) => {
  switch (action.type) {
    case ADD_FAV:
      return {
        ...state,
        favorites: [...state.favorites, action.payload],
        loading: false,
      };

databaseActions.js

export const ADD_FAV = "ADD_FAV";
export const FETCH_FOOD = "FETCH_FOOD";
export const SET_LOADING = "SET_LOADING";

export const addFav = (id) => {
  console.log("fav", id);  /// shows me that works
  return { type: ADD_FAV, payload: id };
};

然后我称之为这样的行动：

<TouchableOpacity onPress={() => addFavBtn(id)}>
<MaterialIcons name="favorite-border" size={25} />
</TouchableOpacity>

但我总是得到一个空数组，这意味着它不会更新它 在上下文中，它起了作用。 有什么想法吗？

---

谢谢

问题在于如何发送您的操作（如评论中所述）。首先，您需要确保分派操作的组件已通过

connect

方法从

react redux

绑定到redux存储，如下所示：

import React from 'react';
import { connect } from 'react-redux';

const ClickableComponent = ({ dispatch }) => {

    // The code that defines the id variable...

    return (
        <TouchableOpacity onPress={() => dispatch(addFavBtn(id))}>
            <MaterialIcons name="favorite-border" size={25} />
        </TouchableOpacity>
    );
};

export const connect()(ClickableComponent);

从“React”导入React；
从'react redux'导入{connect}；
常量ClickableComponent=（{dispatch}）=>{
//定义id变量的代码。。。
返回(
调度（addFavBtn（id））}>
);
};
导出const connect（）（可单击组件）；

---

这样，操作将被分派到存储区，收藏夹列表将按预期更新。要验证这一点，您可以使用浏览器调试器或在reducer中使用

控制台.log

，以确保获得正确的操作id。

另一种方法是从操作创建者中调用dispatch并返回该承诺

databaseActions.js 示例组件

从“React”导入React；
从'react redux'导入{connect}；
从“./databaseActions.js”导入{addFav}；
const ExampleComponent=（{id，addFav}）=>(
addFav（id）}>
添加收藏夹
);
导出默认连接（{/*mapStateToProps*/}，{addFav}）（示例组件）；

---

就我个人而言，我喜欢这种方法，因为它不要求您在任何地方都包含调度，您正在调用您的操作。并允许您在状态更新后使用

.then（）

进行调用（如果需要）。

您如何调度您的操作？如果您没有正确地分派操作本身，则在操作中提供的

console.log

可能无法显示它是否有效。谢谢。像这样

addFavBtn（id）}>

您需要在操作函数中调用dispatch:

返回dispatch（{type:ADD\u FAV，payload:id}）@MarcoDisco这就是问题所在。正如segFault提到的，您需要将您的操作发送到redux商店。请编辑您的问题，使其提供应分派操作的组件的完整代码。
default:returnstate
import React from 'react';
import { connect } from 'react-redux';

const ClickableComponent = ({ dispatch }) => {

    // The code that defines the id variable...

    return (
        <TouchableOpacity onPress={() => dispatch(addFavBtn(id))}>
            <MaterialIcons name="favorite-border" size={25} />
        </TouchableOpacity>
    );
};

export const connect()(ClickableComponent);

export const ADD_FAV = "ADD_FAV";
export const FETCH_FOOD = "FETCH_FOOD";
export const SET_LOADING = "SET_LOADING";

export const addFav = (id) => {
  console.log("fav", id);  /// shows me that works
  return dispatch({ type: ADD_FAV, payload: id });
};

import React from 'react';
import { connect } from 'react-redux';
import { addFav } from './databaseActions.js';

const ExampleComponent = ({ id, addFav }) => (
    <button onPress={() => addFav(id)}>
        Add Favorite
    </button>
);

export default connect({ /*mapStateToProps*/ }, { addFav })(ExampleComponent);