Redux 使用 combineReducers 返回空白页 [英] Redux using combineReducers returning blank page

问题描述

当我使用定义的名称导入 reducers 时，我的应用程序工作正常，但是当我使用 combineReducers 时，它返回的空白页.

store.js 代码是:

import { createStore, applyMiddleware } from 'redux';从'react-redux'导入{提供者}；从redux-thunk"导入 thunk；从'../reducers/index'导入reducer；const store = createStore(减速器，应用中间件(thunk));无功路线=(<提供者商店={商店}><路由器历史={browserHistory}><Route path="/" component={Main}><Route path="/testingtask" component={TestingTask}></路由器></提供者>);

TestingTask.js 是:

从'react'导入React；从'react-dom'导入{渲染}；从 'react-dom' 导入 ReactDOM；从 '../containers/TaskContainer' 导入 TaskContainer；导出默认类 TestingTask 扩展 React.Component {使成为() {返回 (<任务容器/>);}}module.exports = 测试任务；

TaskContainer.js 是:

import React, {Component} from 'react';从反应路由器"导入{链接}；从 'react-dom' 导入 ReactDOM；从'react-redux'导入{连接}；从 'prop-types' 导入 PropTypes；从redux"导入{bindActionCreators}；导入 { fetchPostsWithRedux,fetchPosts,fetchPostsError,fetchPostsSuccess,fetchPostsRequest } from '../actions/TaskAction';class TaskContainer 扩展 React.Component {componentDidMount(){this.props.fetchPostsWithRedux()}使成为(){返回 (<ul>{this.props.posts &&this.props.posts.map((post,i) =>{返回(<li key={i}>{JSON.parse(post.form_data).title}</li>)})})}}函数 mapStateToProps(state){返回 {帖子:state.posts}}函数 mapDispatchToProps(dispatch) {返回 bindActionCreators({fetchPostsWithRedux: fetchPostsWithRedux}, dispatch)}导出默认连接(mapStateToProps,mapDispatchToProps)(TaskContainer);

TaskAction.js 是:

导出函数fetchPostsRequest(){返回 {类型:FETCH_REQUEST"}}导出函数 fetchPostsSuccess(payload) {返回 {类型:FETCH_SUCCESS"，有效载荷}}导出函数 fetchPostsError() {返回 {类型:FETCH_ERROR"}}导出函数 fetchPostsWithRedux() {返回(调度)=>{调度(fetchPostsRequest())；返回 fetchPosts().then(([response, json]) =>{如果(响应.状态 === 200){调度(fetchPostsSuccess(json.data))}别的{调度(fetchPostsError())}})}}导出函数 fetchPosts() {const URL = "api-url";让用户 = JSON.parse(localStorage.getItem('user'));返回获取(网址，{方法:'POST'，标题:{'接受':'应用程序/json'，'内容类型':'应用程序/json'，},正文:JSON.stringify({api_token: user.api_token,类型:'任务'，})}).then(response => Promise.all([response, response.json()]));}

TaskReducer.js 是:

import {FETCH_REQUEST，FETCH_成功，FETCH_ERROR} 来自'../actions/TaskAction';导出默认函数 TaskReducer (state = {}, action) {开关(动作.类型){案例FETCH_REQUEST":返回状态；案例FETCH_SUCCESS":返回 {...状态，帖子:action.payload};默认:返回状态；}}

/reducers/index.js 是:

import { combineReducers } from 'redux';从'./TaskReducer'导入TaskReducer；导出默认的 combineReducers({任务减少器，})

请注意，在 store.js 中使用 import reducer from '../reducers/TaskReducer'; 时，它工作正常.

解决方案

combineReducers 函数拆分对象中的状态，您可以通过 reducer 的名称访问这些对象.

因此，这个函数:

function mapStateToProps(state){返回 {帖子:state.posts}}

必须成为

function mapStateToProps(state){返回 {帖子:state.TaskReducer.posts}}

查看文档和示例:<块引用>

退货

(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 become

function 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 返回空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！