React Redux - 从reducer传递数据时容器/组件不更新答案

【问题标题】：React Redux - container/component not updating when passing data from reducerReact Redux - 从reducer传递数据时容器/组件不更新
【发布时间】：2018-05-16 13:34:22
【问题描述】：

我是 React 新手，请记住这一点。

我正在尝试呈现从 food2fork API 获取的食谱列表，但我无法更新视图，即使数据获取正确。

这里是 recipe_list.js：

import React, { Component } from "react";
import { connect } from "react-redux";

    class RecipesList extends Component {
    // renderRecipe(recipe) {
    //     console.log(recipe);
    //     return (
    //         <div>{recipe}</div>
    //     );
    // }

    render() {
        console.log("Render function ", this.props.recipes)
            return (
            <div>
                <p>Recipes</p>
                <div>{this.props.recipes}</div>
            </div>
            );
    }
}

function mapStateToProps(state){
    return { recipes: state.recipes };
}

export default connect(mapStateToProps)(RecipesList);

这里是 reducer_recipes.js：

import FETCH_RECIPES from "../actions/index";

export default function(state = [], action){
    switch (action.type) {
        case FETCH_RECIPES:
            return action.payload;
    }
    return state;
}

这里是 /reducers/index.js：

import { combineReducers } from 'redux';
import RecipesReducer from "./reducer_recipes";

console.log(RecipesReducer);
const rootReducer = combineReducers({
  recipes: RecipesReducer
});

export default rootReducer;

这里是 /actions/index.js：

import axios from "axios";

const API_KEY = "****************************";
export const URL = `https://food2fork.com/api/search?key=${API_KEY}`;


export const FETCH_RECIPES = "FETCH_RECIPES";

export function fetchRecipes(term){
    const url = `${URL}&q=${term}`;
    const request = axios.get(url);

    return {
        type: FETCH_RECIPES,
        payload: request
    };
}

我没有收到任何具体错误。视图只是没有更新。我试图在文件周围传播一些 console.log 以试图了解问题出在哪里。 Reducer 似乎没有成功地将有效负载传递给组件。

注意：我正在使用 react-promise 所以从 axios 返回的承诺会自动解析。

有什么想法吗？

============================================== =======================

编辑：

感谢您提供有用的链接，但显然我在这里仍然缺少一些东西。我修改了动作索引：

function getStuffSuccess(response) {
  return {
    type: FETCH_RECIPES,
    payload: response
  };
}

function getStuffError(err) {
  return {
    type: ERROR_FETCH_RECIPES,
    payload: err
  };
}

export function fetchRecipes(term) {
    const url = `${URL}&q=${term}`;

  return function(dispatch) {
    axios.get(url)
      .then((response) => {
        dispatch(getStuffSuccess(response));
      })
      .catch((err) => {
        dispatch(getStuffError(err));
      });
  };
}

我还把 redux-thunk 加入了商店：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from "redux-promise";
import Thunk from 'redux-thunk';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(Thunk, ReduxPromise)    (createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

行为与以前没有改变。视图仍未更新。

注意：如果我 console.log 来自 Reducer 的有效负载，数据就在那里。但是当我尝试在视图中做同样的事情时，什么也没有发生。

【问题讨论】：

你应该阅读this

标签： javascript reactjs redux react-redux

【解决方案1】：

您的操作在这里不同步，您需要使用Async Action 将响应传递给reducer，这意味着您必须dispatch 响应而不是返回它。查看给定的链接了解更多详情。

【讨论】：

要添加到上述答案，您必须在安装组件后调用操作。

【解决方案2】：

我会尝试像这样重构您的/actions/index.js：

import axios from 'axios';

export const FETCH_RECIPES = 'fetch_recipes';
export const CREATE_RECIPE = 'create_recipe';

const ROOT_URL = '<url-of-api-endpoint>';
const API_KEY = '<api-key>';

export function fetchRecipes() {
  const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);

  return {
    type: FETCH_RECIPES,
    payload: request
  };
}

export function createRecipe(values, callback){
  const request = axios.post(`${ROOT_URL}/posts${API_KEY}`, values)
  .then(() => callback());

  return {
    type: CREATE_RECIPE,
    payload: request
  }
}

【讨论】：