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

Question

<App foo="123" />

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

我想用 123 渲染应用程序。
但是，如果 MapStateToProps 中的状态有一个 foo 键并且它的值为 abc，该组件将呈现 abc.

我可以检查 ownProps。

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

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

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

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

当组件挂载时，我将发送值 @connect((state) => state, () => {})`

商店将更新为abc，自有道具的价值。 Redux 将更新，组件将再次呈现。
但是这次，状态将是 abc in ..

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

设置此类内容的最佳方法是什么？最好不需要组件渲染两次（我正在使用 SSR）。

就我而言，我正在使用 NextJS 并进行 API 调用以在 getInitialProps 中获取数据。 Return 的 getInitialProps 将数据放在道具上。那些 props 是给 App 的。当用户改变状态时，App 现在需要来自状态的数据，而不是 props

Answer 1

您有 2 个选择：

1.使用 defaultProps

defaultProps can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but not for null props. For example:

App.defaultProps = {
    foo: true
};

请参阅 React 博客 defaultProps。

2。设置初始状态

在你的 reducer 中你可以设置你的状态初始值，这些值可以通过 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;
    }
}

一般来说，我看不出在 mapStateToProps 中重写相同的 props 有什么意义，因为它会阻止你的应用程序被 redux 更新。

Answer 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>
 }

}

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

NextJS: Best way to handle Connect / OwnProps / GetInitialProps

reactjs

redux

next.js