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

Posted 2023-02-22

【中文标题】NextJS：处理 Connect / OwnProps / GetInitialProps 的最佳方式

【英文标题】：NextJS: Best way to handle 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, () => )

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

就我而言，我正在使用 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 传递该道具。如果您最初需要一个不同的值，然后使用该初始值设置存储

【参考方案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 更新。