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

Z时代
2024-01-10
分类：问答

我是React的新手，请记住这一点。React Redux - 从reducer传递数据时容器/组件未更新

我想渲染从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)); 
     }); 
    }; 
}

我也包括终极版，形实转换到商店：

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减速器的有效载荷的数据在那里。但是当我试图在View中做同样的事情时，什么也没有发生。

回答：

你的行为在这里不是同步的，你需要使用Async Action来传递对reducer的响应，也就是说，你必须dispatch而不是返回它。查看给定的链接了解更多详情。

回答：

我会尝试重构你的/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 
    } 
}