Question

我正在练习reactjs和redux课程。我理解反应部分和redux但是无法掌握下面代码中完成的选择器和绑定的知识。

这是代码

const reducer = (state = 1, action) => {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    default:
      return state;
  }
}

const selectCounter = state => state;

const AppPresentation = ({ text, onClick }) => (
  <button onClick={onClick}>{text}</button>
);

const App = connect(
  (state, { bindings: { selectText } }) => ({ text: selectText(state) }),
  dispatch => ({ onClick() { dispatch({ type: 'BUTTON_CLICKED' }); }})
)(AppPresentation)

const onClickIncrease = function*(){
  while (yield take('BUTTON_CLICKED'))
  yield put({ type: 'INCREASE' });
}

const saga = createSagaMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducer, composeEnhancers(applyMiddleware(saga)));
saga.run(onClickIncrease);

ReactDOM.render(
  <Provider store={store}>
   <App bindings={{ selectText: selectCounter }} />
  </Provider>,
  document.querySelector('#app'));

上面的代码优于下面的代码，其中选择器和绑定尚未完成？

const reducer = (state = 1, action) => {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    default:
      return state;
  }
}

const selectCounter = state => state;

const AppPresentation = ({ text, onClick }) => (
  <button onClick={onClick}>{text}</button>
);

const App = connect(
  state => ({ text: selectCounter(state) }),
  dispatch => ({ onClick() { dispatch({ type: 'BUTTON_CLICKED' }); }})
)(AppPresentation)

const onClickIncrease = function*(){
  while (yield take('BUTTON_CLICKED'))
  yield put({ type: 'INCREASE' });
}

const saga = createSagaMiddleware();
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducer, composeEnhancers(applyMiddleware(saga)));
saga.run(onClickIncrease);

ReactDOM.render(
  <Provider store={store}>
   <App />
  </Provider>,
  document.querySelector('#app'));

任何人都可以通过简单的英文解释让我理解吗？ :)对不起，我的英语很差。

Answer 1

select SNo from your_table where SampleNo <= InputValue Order by SampleNo DESC LIMIT 1具有以下语法mapStateToProps

如果将mapStateToProps(state, [ownProps])指定为第二个参数，则其值将是传递给组件的props，并且每当组件接收到新的道具时，将另外重新调用ownProps（例如，如果收到道具从父组件变浅，并使用mapStateToProps参数，重新评估mapStateToProps）

在您的情况下，ownProps将收到从父组件传递的道具

在第一个代码中，您向{ bindings: { selectText } }发送了一个道具，就像您在mapStateToProps组件中收到的App，而在第二个代码中，您没有将任何此类<App bindings={{ selectText: selectCounter }} />传递给零件。因此，第一个优势超过秒，允许您将道具传递给孩子，并在道具改变时更新孩子的价值。

无法理解选择器和绑定的使用

1 个答案: