NextJS：处理 Connect / OwnProps / GetInitialProps 的最佳方式

IT技术 reactjs redux next.js
2021-05-13 00:56:42

<App foo="123" />

@connect((state) => state, () => {})
class App extends Component

我想用 123 呈现 App。
但是，如果 MapStateToProps 中的状态有一个foo键并且它的值为abc，则组件将呈现abc。

我可以检查ownProps。 

@connect((state, ownProps) => ({...state, ...ownProps}), () => {})
class App extends Component

并合并 ownProps 和 state。但是如果我开始调度操作来更新 Redux 中的 foo，状态将始终为abc. ownProps 将始终覆盖 state 中的键。

我可以在组件安装时分派一个动作。 

componentDidMount() {
  dispatchFoo(this.props.value)
}

当组件安装时，我正在调度值 @connect((state) => state, () => {})`

Store 将更新为abc，自身props的值。Redux 将更新，组件将再次渲染。
但这一次，状态将abc处于..

@connect((state) => state, () => {})

设置这样的东西的最佳方法是什么？最好不需要组件渲染两次（我使用的是 SSR）。

就我而言，我正在使用 NextJS 并进行 API 调用以获取 getInitialProps 中的数据。getInitialProps 的返回将数据放在props上。这些props被赋予了 App。当用户改变状态时，应用现在需要来自状态的数据，而不是props

2个回答

如果我没有错的话，您想实现一些称为不受控制的组件的东西。如果是这样，我建议您按以下方式实施它。


Class Page extends React.Component{
  static getInitialProps(){
    return {foo:"Some Value"}
  }
  render(){
    return <Provider store={createStore(reducer,{foo:this.props.foo})}>
      <App/>
    </Provider>

  }
}

然后你的 app.js 将是

@connect(mapStateToProps,{dispatchFoo})
Class App extends React.Component{
 componentDidMount(){
   this.props.dispatchFoo({foo:"some new value"});
 }
 render(){
   <div>{this.props.foo}</div>
 }

}

您有 2 个选择：

1.使用defaultProps

defaultProps 可以定义为组件类本身的属性，以设置类的默认props。这用于未定义的props，但不适用于空props。例如：

App.defaultProps = {
    foo: true
};

请参阅React 博客中的defaultProps。

2.设置初始状态

在您的减速器中，您可以设置状态初始值，该值将通过mapStateToProps以下方式提供：

const initialState = {
    foo: false
};

export default function(state = initialState, action) {
    console.log('action', action);
    switch (action.type) {
        case types.SOME_ACTION:
            return {
                ...state,
            foo: true
            };
        case types.ANOTHER_ACTION:
            return {
                ...state,
                foo: false
            };
        default:
            return state;
    }
}

一般来说，我认为在内部覆盖相同的 props 没有任何意义，mapStateToProps因为它应该阻止您的应用程序被 redux 更新。

其它你可能感兴趣的问题
上一篇避免在 Context 更新时运行效果挂钩 下一篇层层叠叠的波纹