Redux使用combineReducers返回空白頁

Question

當我導入reducers與他們的定義名稱我的應用程序工作正常，但是當我使用combineReducers其返回空白頁。

store.js代碼是：

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是：

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是：

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是：

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是：

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是：

import { combineReducers } from 'redux'; 
import TaskReducer from './TaskReducer'; 

export default combineReducers({ 
    TaskReducer, 
}) 

在store.js其工作正常使用import reducer from '../reducers/TaskReducer';時，請注意。

Answer 1

combineReducers函數將對象中的狀態拆分爲可以通過reducer的名稱訪問的對象。

因此，這種功能：

function mapStateToProps(state){ 
    return { 
    posts: state.posts 
    } 
} 

有可能成爲

function mapStateToProps(state){ 
    return { 
    posts: state.TaskReducer.posts 
    } 
} 

看看到documentation和例子：

返回

（功能）：減速器，調用減速器內部的每個減速器，並構造具有相同形狀的狀態對象。

如果您要爲存儲鍵定義不同的名稱，只是改變你傳遞給函數的對象：

export default combineReducers({ 
    task: TaskReducer, 
}) 

function mapStateToProps(state){ 
    return { 
    posts: state.task.posts 
    } 
}