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

【问题标题】：NextJS: Best way to handle Connect / OwnProps / GetInitialPropsNextJS：处理 Connect / OwnProps / GetInitialProps 的最佳方式
【发布时间】：2019-10-11 11:44:15
【问题描述】：

<App foo="123" />

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

我想用 123 渲染 App。
但是，如果 MapStateToProps 中的 state 有一个 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 in ..

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

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

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

【问题讨论】：

为什么要在两个不同的地方/以两种不同的方式将相同的 prop 键传递给组件？（又名连接和内联）。这听起来像是一种非常容易出错的代码编写方式。
我不是。我正在向 App 传递价值 123 的道具 foo。之后，用户操作通过 redux 更改 foo 的值。 Connect 将 store 状态映射到 props。并且 state 有 foo 键。
是的，正是我所描述的。为什么你在 redux 中的 state 会有一个与 inline prop 相同的键？您应该有单独的道具键，用于从连接的商店中发送内联的内容
我正在使用 NextJS 并进行 API 调用以获取 getInitialProps 中的数据。 getInitialProps 的返回将数据放在道具上。这些道具给App。当用户更改状态时，应用程序现在需要来自状态的数据，而不是道具。你能详细说明如何使用这个separate prop吗？
不要将foo 作为组件上的道具传递，让 connect 传递该道具。如果您最初需要一个不同的值，然后使用该初始值设置存储

标签： reactjs redux next.js

【解决方案1】：

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


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 可以定义为组件类本身的属性，用于设置类的默认道具。这用于未定义的道具，但不适用于空道具。例如：

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

一般来说，我认为在 mapStateToProps 中覆盖相同的道具没有任何意义，因为它应该会阻止您的应用被 redux 更新。

【讨论】：