如何将admin-on-rest主组件连接到redux-store？

Question

在admin-on-rest中，我想将属性"screen mode“(移动或桌面)保存到redux-store中。我为这个任务编写了action和reducer：

///action
export const SET_SCREEN_MODE = 'SET_SCREEN_MODE'

export default  (mode) => ({
  type: SET_SCREEN_MODE,
  mode: mode
});


///reducer

import { SET_SCREEN_MODE } from './changeScreenModeAction';

export default (previousState = 'screen', { type, mode }) => {
    if (type === SET_SCREEN_MODE) {
        return mode
    }
    return previousState;
}

问题是我需要调用action来更新我的主app-component中的状态：

import changeScreenModeAction from './changeScreenModeAction'
...
class App extends Component {
    componentDidMount = () => {
        const windowWidth = window.innerWidth;
        const mode = this.checkMode(windowWidth);
        if (this.state.screenMode != mode) {
          this.props.changeScreenMode(mode)
        }
}
...
    render() {
        return (
            <Admin
              customReducers={customReducers}
              restClient={restClient}
            >
           ...my Resources
            </Admin>
        );
    }
 }
 const mapStateToProps = (state) => ({
   changeScreenMode: changeScreenModeAction
 })

 export default connect(mapStateToProps)(App);

但是，当然，我得到的错误是redux-connect函数在这个上下文中找不到提供者。

做这些事情只有一种方法-- https://marmelab.com/admin-on-rest/CustomApp.html，或者，也许我有更简单的方法？

Answer 1

是的，首先您应该使用Responsive组件为不同的目标渲染视图。你最初的想法不会对屏幕大小的改变做出反应。

对于您的用例，最好创建一个自定义startupSaga并将其传递给Admin的customSaga prop，或者创建一个自定义Layout并将其传递给Admin的appLayout prop。