Redux 使用 combineReducers 返回空白页

退货(Function):一个reducer，调用reducer内的每个reducer对象，并构造一个形状相同的状态对象.如果你想为 store key 定义一个不同的名字，只需改变你传递给函数的对象:导出默认的 combineReducers({任务:TaskReducer，})函数 mapStateToProps(state){返回 {帖子:state.task.posts}}When I am importing reducers with their defined name my application working fine but when I am using combineReducers its returning blank page.store.js code is:import { createStore, applyMiddleware } from 'redux';import { Provider } from 'react-redux';import thunk from 'redux-thunk';import reducer from '../reducers/index';const store = createStore( reducer, applyMiddleware(thunk));var routes =( <Provider store={store}> <Router history={browserHistory}> <Route path="/" component={Main}> <Route path="/testingtask" component={TestingTask}> </Router> </Provider>);TestingTask.js is:import React from 'react';import { render } from 'react-dom';import ReactDOM from 'react-dom';import TaskContainer from '../containers/TaskContainer';export default class TestingTask extends React.Component { render() { return ( <TaskContainer /> ); }}module.exports = TestingTask;TaskContainer.js is:import React, {Component} from 'react';import { Link } from 'react-router';import ReactDOM from 'react-dom';import { connect } from 'react-redux';import PropTypes from 'prop-types';import {bindActionCreators} from 'redux';import { fetchPostsWithRedux,fetchPosts,fetchPostsError,fetchPostsSuccess,fetchPostsRequest } from '../actions/TaskAction';class TaskContainer extends React.Component { componentDidMount(){ this.props.fetchPostsWithRedux() } render(){ return ( <ul> { this.props.posts && this.props.posts.map((post,i) =>{ return( <li key={i}>{JSON.parse(post.form_data).title}</li> ) }) } </ul> ) }}function mapStateToProps(state){ return { posts: state.posts }}function mapDispatchToProps(dispatch) { return bindActionCreators({fetchPostsWithRedux: fetchPostsWithRedux}, dispatch)}export default connect(mapStateToProps,mapDispatchToProps)(TaskContainer);TaskAction.js is:export function fetchPostsRequest(){ return { type: "FETCH_REQUEST" }}export function fetchPostsSuccess(payload) { return { type: "FETCH_SUCCESS", payload }}export function fetchPostsError() { return { type: "FETCH_ERROR" }}export function fetchPostsWithRedux() { return (dispatch) => { dispatch(fetchPostsRequest()); return fetchPosts().then(([response, json]) =>{ if(response.status === 200){ dispatch(fetchPostsSuccess(json.data)) } else{ dispatch(fetchPostsError()) } }) }}export function fetchPosts() { const URL = "api-url"; let user = JSON.parse(localStorage.getItem('user')); return fetch(URL, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ api_token: user.api_token, type: 'task', }) }).then(response => Promise.all([response, response.json()]));}TaskReducer.js is:import { FETCH_REQUEST, FETCH_SUCCESS, FETCH_ERROR} from '../actions/TaskAction';export default function TaskReducer (state = {}, action) { switch (action.type) { case "FETCH_REQUEST": return state; case "FETCH_SUCCESS": return {...state, posts: action.payload}; default: return state; }}/reducers/index.js is:import { combineReducers } from 'redux';import TaskReducer from './TaskReducer';export default combineReducers({ TaskReducer,})Please note when using import reducer from '../reducers/TaskReducer'; in store.js its working fine. 解决方案 The combineReducers function split the state in objects that you can access through the name of the reducer.Therefore, this function:function mapStateToProps(state){ return { posts: state.posts }}has to becomefunction mapStateToProps(state){ return { posts: state.TaskReducer.posts }}Take a look to the documentation and to the example: Returns (Function): A reducer that invokes every reducer inside the reducers object, and constructs a state object with the same shape.If you want to define a different name for the store key, just change the object you pass to the function:export default combineReducers({ task: TaskReducer,})function mapStateToProps(state){ return { posts: state.task.posts }} 这篇关于Redux 使用 combineReducers 返回空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！