React Tips

Render with condition (if)

Key

Remember that the key only has to be unique among its siblings, not globally unique.

User action to callback props in pure components

<button key={entry} onClick={() => this.props.vote(entry)}>

This is generally how we'll manage user input and actions with pure components: The components don't try to do much about those actions themselves. They merely invoke callback props.

Redux

The big idea of react-redux is to take our pure components and wire them up into a Redux Store by doing two things:

Mapping the Store state into component input props.

Mapping actions into component output callback props.

Designing a Redux app often begins by thinking about the application state data structure. This is what describes what's going on in your application at any given time.

In Redux, the application state is all stored in one single tree structure.

Think about the application state in isolation from the application's behavior

It is generally a good idea in these state transformation functions to always morph the old state into the new one instead of building the new state completely from scratch.

It's becomes the job of our reducer to pick apart the state so that it gives only the relevant part to the function. The main reducer function only hands parts of the state to lower-level reducer functions. We separate the job of finding the right location in the state tree from applying the update to that location.

Don't forget to have reducer for every key in your store, otherwise you'll see error: 'Unexpected keys':

const rootReducer = combineReducers({
counter, // you have a corresponding reducer function with the same name
b, // you have a corresponding reducer function with the same name
c: (state=[], action) => state // you don't have the reducer function yet you have the key 'c' in your store tree
});

When will React refresh?

React: if I just update a part of itwizm, why it won't refresh? Is it because it's not component, or is it because it's not immutable?

If the props of a component are all immutable values, and the props keep pointing to the same values between renders, there can be no reason to re-render the component, and it can be skipped completely!

That means we'll just need to render props.Check test/components/Voting_spec.jsxIt's REPLACING the props, not just change something inside of the props.

How to handle temp state and redirect?

Question:

Q:If it's all functional and immutable, do I create helper methods for things like hasError(), or store the computed data in store?A: One way to do is create a class being a wrapper of a immutable instance.