Javascript 组件之间的react redux存储映射问题

我正在开发我的第一个“大”react redux应用程序。我试图在组件之间映射react-redux状态，但似乎遗漏了什么

除了一件事之外，一切都很有魅力：我的带有react route导航的菜单工作正常，我的组件被渲染，button onClick事件正常，我的rest api被调用，我用添加到redux存储中的正确json数据返回http 200（我猜）

唯一不起作用的是，在TableRenderer.js中this.state为null

我得到的错误与redux状态映射有关：

未捕获的TypeError:无法读取null的属性“json”

App.js（主类）

Reducers.js

const store = createStore(
    combineReducers({
        ...reducers,
        routing: routerReducer
    }),
    applyMiddleware(thunk)
)

const history = syncHistoryWithStore(browserHistory, store)

ReactDom.render(
    <Provider store={store}>
        <Router history={history}>
            <Route path='/' component={MainLayout}>
                <Route path='about' component={About}/>

                <Route path="list">
                    <Route path="people" component={PeopleList}/>
                </Route>

                <Route path='*' component={NotFound}/>
            </Route>
        </Router>
    </Provider>,
    document.getElementById('root')
);

const loadDataAction = (json) => {
    return {
        type: ActionType.GET_DATA,
        json: json
    }
};

export function fetchData() {
    return (dispatch) => {
        dispatch(loadDataAction(''));

        axios({
            baseURL: UrlConstant.SERVICE_ROOT_URL,
            url: 'list/people',
            method: 'get'
        })
            .then((response) => {
                if (response.status == 200) {
                    dispatch(loadDataAction(response.data));
                }
            })
            .catch((error) => {
                if (error.response) {
                    dispatch(loadDataAction(''));
                }
            });
    }
}

const initialState = {
    json: ''
};

export default (state = initialState, action) => {
    return Object.assign({}, state, {
        json: action.json
    });
}

{this.props.json} needs to be used instead of {this.state.json}

---

更新： 感谢Max Sindwani的帮助，这个问题已经解决了。有很多事情要解决

App.js（主类） 我的商店定义不正确

const store = createStore(
    combineReducers({
        response: reducer,
        routing: routerReducer
    }),
    applyMiddleware(thunk)
)

TableRenderer.js

const store = createStore(
    combineReducers({
        ...reducers,
        routing: routerReducer
    }),
    applyMiddleware(thunk)
)

const history = syncHistoryWithStore(browserHistory, store)

ReactDom.render(
    <Provider store={store}>
        <Router history={history}>
            <Route path='/' component={MainLayout}>
                <Route path='about' component={About}/>

                <Route path="list">
                    <Route path="people" component={PeopleList}/>
                </Route>

                <Route path='*' component={NotFound}/>
            </Route>
        </Router>
    </Provider>,
    document.getElementById('root')
);

const loadDataAction = (json) => {
    return {
        type: ActionType.GET_DATA,
        json: json
    }
};

export function fetchData() {
    return (dispatch) => {
        dispatch(loadDataAction(''));

        axios({
            baseURL: UrlConstant.SERVICE_ROOT_URL,
            url: 'list/people',
            method: 'get'
        })
            .then((response) => {
                if (response.status == 200) {
                    dispatch(loadDataAction(response.data));
                }
            })
            .catch((error) => {
                if (error.response) {
                    dispatch(loadDataAction(''));
                }
            });
    }
}

const initialState = {
    json: ''
};

export default (state = initialState, action) => {
    return Object.assign({}, state, {
        json: action.json
    });
}

{this.props.json} needs to be used instead of {this.state.json}

该类中缺少一个连接工作人员。它在redux存储和类区域设置道具之间绑定数据（如果我是正确的）：

---

就是这样：）

错误似乎与以下事实有关：

状态

将为空（因为没有定义初始本地状态）。Redux旨在提供来自提供者组件的单向数据流。您需要向下传递道具或从组件连接（尽管建议您仅连接顶级组件，以避免丢失数据来源的跟踪）。每当reducer返回一个新的/更新的状态时，提供者都会将道具再次传递给它的子级，并使它们重新呈现。尝试连接

表格渲染器

。像这样的方法应该会奏效：

类TableRenderer扩展了React.Component{
render（）{
返回(
{this.props.title}
)。尝试类似这样的操作--
您好，谢谢您的回复。我已将connect staff添加到TableRender类中，并将this.state.json更改为this.props.json。现在我有一个props.json为null错误：Chrome:Uncaught TypeError:无法读取未定义的属性“map”，Firefox:TypeError:this.props.json为未定义stat的输出是什么当映射到道具时？你能在mapStateToProps中添加一个console.log（state）吗？另外，我已经更新了我的示例来修复一些小错误，不用担心琐事；）这是console.log（state）的结果：。可能问题是状态未定义。但是，等等，这是一个状态。状态…我在状态对象中看不到您的其他还原程序。是否正确导入了它？此外，我认为您需要将还原程序作为命名函数，以便在状态中为其分配一个键（或者在组合还原程序时为其分配一个键）。
const initialState = {
    json: []
};

export default (state = initialState, action) => {
    switch (action.type) {
        case ActionType.GET_DATA:
            return Object.assign({}, state, {
                json: action.json
            });
        default:
            return state;
    }
};

export default reduces;