redux所需的原型未定义

Question

I've been bashing my head in trying to play around with this. FOr somereason my props aren't connecting in redux. Here is my error

VM803:36 Warning: Failed prop type: The prop `apiData` is marked as required 
in `TestApiPage`, but its value is `undefined`.
in TestApiPage (created by RouterContext)
in RouterContext (created by Router)
in Router (created by Root)
in Provider (created by Root)
in Root
in AppContainer
VM803:36 Warning: Failed prop type: The prop `actions` is marked as required 
in `TestApiPage`, but its value is `undefined`.
in TestApiPage (created by RouterContext)
in RouterContext (created by Router)
in Router (created by Root)
in Provider (created by Root)
in Root
in AppContainer

Here is my code TestApiPage

import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../actions/testApiActions';
import {TestApiForm} from '../components/TestApi';

export const TestApiPage = (props) => {
    console.log(props);
  return (
    <TestApiForm
    apiData={props.apiData}

/>
);
};

TestApiPage.propTypes = {
  actions: PropTypes.object.isRequired,
  apiData: PropTypes.object.isRequired
};

function mapStateToProps(state) {
  return {
    apiData: state.apiData 
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  };
}
    export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TestApiPage);

testApiActions

export function callTestApiAction() {
return function (dispatch) {
return dispatch({
  type: types.CALL_TEST_API,
  message: "blah",

});
 };
}

testApiReducer

import {CALL_TEST_API} from '../constants/actionTypes';
import objectAssign from 'object-assign';
import initialState from './initialState';

export function testApiReducer(state = initialState.apiData, action) {

  switch (action.type) {
    case CALL_TEST_API:

      return objectAssign({}, state, {message: action.message});
    default:
      return state;
  }
}

initialState

export default {

   apiData: {
        message: "You haven't called your api yet! :("
    }
};

When I use Redux dev tools i do see my state there and logs in the connect show it is working. not sure what's going on. Any clues?

Answer 1

So your problem is that your initial state is the contents of apiData , and not an object that contains apiData .

In other words you set state object equal to apiData :

export function testApiReducer(state = initialState.apiData, action) {
//                                     ^ here you set state = apiData
}

But you want to extract apiData as a property of state:

function mapStateToProps(state) {
  return {
    apiData: state.apiData 
    //       ^ but here you expect state.apiData
  };
}

Change the reducer to use the entire initial state instead:

// here's your reducer if your state is `{ apiData }`
export function testApiReducer(state = initialState, action) {
//                                     ^ use only initialState here
  switch (action.type) {
    case CALL_TEST_API:

      // make sure you properly update the internal `apiData` part of the state
      return objectAssign({}, state, {
        apiData: Object.assign({}, state.apiData, {
          message: action.message
        });
    default:
      return state;
  }
}

Or change anywhere you have state.apiData to use just state .