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

我正在开发我的第一个“大” react-redux应用程序。我正在尝试在组件之间映射react-redux状态，但似乎我错过了一些东西。

一切工作都像一个魅力，除了一件事：具有反应路线导航的菜单运行良好，呈现了我的组件，按钮onClick事件正常，调用了我的api，然后使用正确的json数据返回了http 200。 redux商店（我猜）。

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

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

未捕获的TypeError：无法读取null的属性'json'

App.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')
);

PeopleList.js（我的主要组件）

export default class PeopleList extends React.Component {
    render() {
        return (
            <TableRenderer title='My 1st people list' />
        );
    }
}

TableRenderer.js（从redux存储读取数据并进行渲染）

export default class TableRenderer extends React.Component {
    render() {
    return (
        <div>
        <p style={STYLE.title}>{this.props.title}</p>
        <ActionBar />
        <table style={STYLE.table}>
            <thead style={STYLE.tableHead}>
            <tr>
                <th style={STYLE.td}>id</th>
                <th style={STYLE.td}>field 1</th>
                <th style={STYLE.td}>field 2</th>
                <th style={STYLE.td}>field 3</th>
            </tr>
            </thead>
            <tbody style={STYLE.tableBody}>
            {this.state.json.map(row => {
                return <RowRenderer key={row.id} row={row} />
            })}
            </tbody>
        </table>
        <ActionBar />
        </div>
    );
    }
}

ActionBar.js（包含按钮和调度动作）

class ActionBar extends React.Component {
    render() {
        return (
            <div style={STYLE.actionBar}>
                <Button bsSize="xsmall"
                        onClick={() => this.props.doRefresh()}>
                    Refresh
                </Button>
                <Button bsSize="xsmall">Clear all from database</Button>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        json: state.json
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        doRefresh: () => dispatch(fetchData())
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(ActionBar)

TableAction.js（我的动作类）

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(''));
                }
            });
    }
}

Reducers.js

const initialState = {
    json: ''
};

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

更新：谢谢马克斯·辛德瓦尼（Max Sindwani）的帮助，此问题已解决。有很多事情要解决。

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

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

TableRenderer.js

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

该班级缺少联络人员。它在redux存储和类语言环境道具之间绑定数据（如果我没错的话）：

class TableRenderer extends React.Component {
    render() {
        return (
            <div>
                ...
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        json: state.response.json
    };
};

export default connect(mapStateToProps)(TableRender)

Reducers.js

我的reducer也是错误的，因为没有switch语句，在初始阶段，redux以错误的方式初始化了存储。并且json的类型需要为数组，因为它包含多个项目。

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;

就是这样 ：）