NextJS: лучший способ обработать Connect / OwnProps / GetInitialProps - PullRequest
Новая
       5

NextJS: лучший способ обработать Connect / OwnProps / GetInitialProps

1 голос
/ 25 мая 2019

<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

и объединить собственные свойства и состояния.Но если я начну отправлять действия по обновлению foo в Redux, состояние всегда будет abc.ownProps всегда будет переопределять ключи в состоянии.

Я могу отправить действие, когда компонент монтируется.

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

когда компонент монтируется, я отправляю значение @ connect ((state) => state, () => {}) `

Store будет обновленс abc, значение собственного реквизита.Redux обновится, и компонент будет визуализироваться еще раз.
Но на этот раз состояние будет abc in ..

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

Каков наилучший способ установить что-токак это?Предпочтительно, для этого не требуется, чтобы компонент отображался дважды (я использую SSR).

В моем случае я использую NextJS и выполняю вызов API для получения данных в getInitialProps.Возврат getInitialProps помещает данные в реквизит.Эти реквизиты даны в App.Когда пользователь меняет состояние, приложению теперь нужны данные из состояния, а не реквизиты

Ответы [ 2 ]

0 голосов
/ 25 мая 2019

если я не ошибаюсь, вы хотите реализовать нечто, известное как неуправляемые компоненты. Если это так, я предлагаю вам реализовать это следующим образом. 


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

}
0 голосов
/ 25 мая 2019

У вас есть 2 варианта:

1. использовать defaultProps

defaultProps может быть определено как свойство самого класса компонента, чтобы установить реквизиты по умолчанию для класса. Это используется для неопределенных реквизитов, но не для нулевых реквизитов. Например: 

App.defaultProps = {
    foo: true
};

См. defaultProps из блога React.

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, так как это должно помешать вашему приложению обновляться при помощи избыточности.

...