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

Question

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

除了一件事情外，其他所有东西都像一个魅力：我的菜单具有反应路线导航功能正常，我的组件已呈现，按钮onClick事件还可以，我的剩余api被调用，并且我返回http 200并添加了正确的json数据。 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;

而已 ：）

Answer 1

该错误似乎与state为null的事实有关（因为未定义初始本地状态）。 Redux旨在从提供程序组件提供单向数据流。 您需要向下传递道具或从组件进行连接（尽管建议您仅连接顶级组件，以避免丢失数据的来源）。 减速器每当返回新的/更新的状态时，提供者都会再次将道具传递给其子代，并使它们重新渲染。 尝试连接TableRenderer 。 这样的事情应该起作用：

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.props.json.map(row => {
                return <RowRenderer key={row.id} row={row} />
            })}
            </tbody>
        </table>
        <ActionBar />
        </div>
    );
    }
}

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

export default connect(mapStateToProps)(TableRenderer);

请注意，在连接和映射状态之后，状态作为道具存在于组件中。 还要注意，如果使用map ，则需要将json（如果尚未更改）更改为数组，并将初始状态保持为空数组。

此外，检查以确保包括减速器。 看起来您没有将密钥与json缩减器相关联（假设routingReducer来自https://github.com/reactjs/react-router-redux ）。 尝试这样的事情-https: //jsfiddle.net/msindwan/bgto9c8c/