Question

我只是试图将redux集成到我的react-native应用程序中.CombineReducer曾经组合了两个reducer，但是它给了我不确定的道具。

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

Answer 1

是的，对于在<svg viewBox="0 0 375 667"> <text id="Username" class="input-mimic" x="50" y="50" alignment-baseline="hanging">Username</text> <foreignObject width="50" height="23" x="50" y="46"> <input id="input" class="input-real" type="text" value="Username"/> </foreignObject> </svg>中访问的道具来说，这是有效的undefined，因为mapStateToProps只是一个正常的函数，它将Redux状态暴露给已附加到组件的组件。使用mapStateToProps存储。 connect不知道您的组件属性，但它确实通过将组件的redux状态作为属性来对其进行更新或添加更多内容，这就是编写函数的良好约定的原因名称为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向存储调度了一个动作，从而赋予了组件可变的权力redux商店。因此，根据以上说明，可以使用updateData从MyContainer中的任何地方访问this.props.updateData()函数。

希望有帮助。快乐编码：）

状态正在更新至组件，但道具未定义

1 个答案: