CODEWITHSUNDEEP
javascriptreactjsredux
Serenity
Serenity

Reputation: 4054

Not able to understand the use of selector and binding

I am practicing reactjs and redux course. I am understanding the react part and also redux but could not grasp the knowledge of selector and binding done in below code.

Here is the code

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

what is the advantage of above code over below code where selector and bindings has not done?

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

Can anyone please make me understand with simple English explanation? :) Sorry my English is poor.

Upvotes: 1

Views: 65

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281696

mapStateToProps has the follwoing syntax mapStateToProps(state, [ownProps])

If ownProps is specified as a second argument, its value will be the props passed to your component, and mapStateToProps will be additionally re-invoked whenever the component receives new props (e.g. if props received from a parent component have shallowly changed, and you use the ownProps argument, mapStateToProps is re-evaluated)

In your case { bindings: { selectText } } will receive the props passed from the parent component

In the first code you are sending a prop to the App like <App bindings={{ selectText: selectCounter }} /> which is received in you mapStateToProps component while in the second code you are not passing any such prop to the component. Hence the first has an advantage over the second to allow you to pass props to the child and update the value in the child when the prop changes.

Upvotes: 1

Related Questions