使用react和redux显示json数据

我正在尝试用redux加载一些本地json数据，并在react应用程序中显示。但是我得到的

页面ID在减速机中未定义

我不确定我在这里做错了什么，我想我传递数据的方式可能有问题，但我对redux非常陌生，所以我不确定

数据

const page = [
   {"title":"Mollis Condimentum Sem Ridiculus"},
   {"title":"Pharetra Tellus Amet Commodo"}
]
export default page;

行动

const getPage = (pageId) => {
    const page = { pageId: pageId }
    return {
        type: 'GET_PAGE_SUCCESS',
        payload: page
    }
 }
 export default getPage

减速器

import getPage from '../actions/actionCreators'
import pageData from './../data/pageData';


 const defaultState = pageData

 const pageReducer = (state = defaultState, action) => {
    if (action.type = 'GET_PAGE_SUCCESS') {
       state.page[action.payload.pageId].title = action.payload
     }

   return state
  }

  export default PageReducer

组件

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import getpage from '../../actions/actionCreators'

const mapStateToProps = (state, props) => {
   const page = state.page[props.pageId]
   return { page }
 }

 class Page extends Component {
    componentDidMount () {
       this.props.getpage(this.props.pageId)
  }

  render() {

       return (<div><PageContainer pageId={0} /></div>)
     }
  }

  const PageContainer = connect(mapStateToProps, { getpage })(page)

  export default Page

import React，{Component，PropTypes}来自“React”
从“react redux”导入{connect}
从“../../actions/actionCreators”导入getpage
常量mapStateToProps=（状态、道具）=>{
const page=state.page[props.pageId]
返回{page}
}
类页面扩展组件{
组件安装（）{
this.props.getpage（this.props.pageId）
}
render（）{
返回（）
}
}
const PageContainer=connect（mapStateToProps，{getpage}）（第页）
导出默认页面
嘿，我想我看到了您组件中的一个小错误。当您在组件的道具上设置页面而不是页面ID时，您正在执行
this.props.pageId
。那么它不应该是
this.props.getPage（this.props.page.pageId）
吗？是吗

还有一个小提示，使用redux的一个重要提示是不要改变状态。在您正在执行的减速机中，
state.page[action.payload.pageId].title=action.payload
您可能不应该这样设置状态，而是返回一个名为newState的新对象，该对象与state相同，但标题已更新。在Redux中将对象视为不可变的很重要。干杯
我已将您的代码修改为可工作的JSFIDLE供参考：

我试图让它尽可能接近您的示例，但让我解释一下为使其正常工作所做的更改（还要注意，JSFIDLE不使用ES6导入语法）

1） 您的页面容器构造不正确。最后一个参数应该是对页面组件（而不是“页面”）的引用

2） 您在页面组件中使用了PageContainer，但PageContainer是页面的“包装器”。在呈现方法中使用PageContainer而不是Page，因此它会加载数据（映射状态和动作）

4） 我在JSFIDLE中添加了一个异步示例来解释如何实际从服务器获取页面（因为简单的示例是不够的）。这需要thunk中间件使redux工作（因为您需要访问dispatch方法才能异步调用它）。setTimeout模拟长时间运行的调用

const getPageAsync = (pageId)=>{
    return (dispatch, getState) => {
    setTimeout(()=>{

      const page = pageDatabase[pageId]; // this call would be to the server, simulating with a setTimeout
        console.log("dispatching");
      // then you dispatch the page you got into state
      dispatch({
        type: 'GET_PAGE_SUCCESS',
        payload: {
            id: pageId,
          page: page
        }
      });
    }, 2000);
  }
}

JSFIDLE加载2个容器，一个包含简单的getPage，另一个包含异步版本，异步版本在2秒钟后加载标题

希望这对您的react/redux之旅有所帮助。
谢谢，我给了您更新组件的建议，但仍然遇到同样的问题。根据你的其他评论，我怀疑我还有一些根本错误的东西。学习很难！
ReactDOM.render(
    <Provider store={store}>
    <div>
      <PageContainer pageId="0" async={false} />
      <PageContainer pageId="1" async={true} />
    </div>
  </Provider>,
  document.getElementById('root')
);

const getPageSimple = (pageId) => {
  const page = pageDatabase[pageId]; // this call would be to the server

  // then you dispatch the page you got into state
  return {
    type: 'GET_PAGE_SUCCESS',
    payload: {
        id: pageId,
      page: page
    }
  }
}

const getPageAsync = (pageId)=>{
    return (dispatch, getState) => {
    setTimeout(()=>{

      const page = pageDatabase[pageId]; // this call would be to the server, simulating with a setTimeout
        console.log("dispatching");
      // then you dispatch the page you got into state
      dispatch({
        type: 'GET_PAGE_SUCCESS',
        payload: {
            id: pageId,
          page: page
        }
      });
    }, 2000);
  }
}