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,
})

在import reducer from '../reducers/TaskReducer'; store.js中使用^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*@)(?=.*\.).+$时，请注意。

Answer 1

combineReducers函数将您可以通过reducer名称访问的对象中的状态分开。

因此，这个功能：

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

必须成为

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

查看documentation和示例：

<强>返回

（Function）：一个reducer，它调用reducers中的每个reducer   对象，并构造一个具有相同形状的状态对象。

如果要为商店密钥定义其他名称，只需更改传递给该功能的对象：

export default combineReducers({
  task: TaskReducer,
})

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

Redux使用combineReducers返回空白页面

1 个答案: