Состояние обновляется до компонента, но реквизиты не определены - PullRequest
Новая
       29

Состояние обновляется до компонента, но реквизиты не определены

0 голосов
/ 30 ноября 2018

Я только что попытался интегрировать избыточность в свое приложение-реактив. CombineReducer использовал для объединения двух редукторов, но дает мне неопределенные реквизиты.

CounterComponent 

 function mapStateToProps(state) {
   console.log(props)  //undefined
   console.log(state); // counterReducer: { counter: 2 }
   return {
       counter: state.counter
   };
  }

reducerIndex.js 

import { combineReducers } from 'redux';
import { todoReducer } from './todoReducer';
import { counterReducer } from './counterReducer';
export default combineReducers({
  counterReducer,
  todoReducer
});

App.js 

const store = createStore(reducer);

export default class App extends Component {
  render() {
     return (
      <Provider store={store}>
       <CounterApp />
      </Provider>
   );
  } 
}

1 Ответ

0 голосов
/ 30 ноября 2018

Да, это действительный undefined для реквизита, к которому обращаются в mapStateToProps, потому что mapStateToProps - это просто обычная функция, которая выставляет избыточное состояние вашему компоненту, который вы подключили к хранилищу, используя connect.mapStateToProps не знает реквизиты вашего компонента, но он обновляет их или добавляет к ним больше, передавая ваш статус редукса вашему компоненту как реквизиты , поэтому рекомендуется записать имя функции в виде mapStateToProps!поэтому, когда вы пишете следующее: 

class MyContainer extends Component {
   constructor (props) {
      super (props);
   }
   ......
   .....
   render () {
    return <MyCoolComponent />
   }
};

function mapStateToProps(state) {
  const {myreducer} = state;
  return {
     data: myreducer.data 
  }
}

function mapDispatchToProps (dispatch, ownProps) {
   return {
      updateData: () => {
         dispatch(someAction());  //someAction: this will return something like this: {type: MY_UPDATE_ACTION}
      }
   }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyContainer);

Итак, в компоненте MyContainer вы получите доступ к data в качестве одного из его реквизитов.Вы можете получить доступ к данным в любом месте класса, используя this.props.data.

С другой стороны, mapDispatchToProps предоставляет функции в качестве подпорки для присоединенного компонента, а представляемые функции имеют доступ к dispatch, который фактически отправляетдействие в хранилище, тем самым давая вашему компоненту возможность изменять хранилище избыточности.Таким образом, с вышеприведенным объяснением, функция updateData может быть доступна из любого места в MyContainer, используя this.props.updateData().

Надеюсь, что это поможет.Happy Coding:)

...