React.js
Last updated
Last updated
Use IndexLink
to avoid index always active:
How to pass data from parent route to children: see
Use this template, or see this issue .
Remember that the key only has to be unique among its siblings, not globally unique.
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.
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.
Store stores your application state over time, a single tree
store.getState()
you can dispatch actions to it store.dispatch({type: 'NEXT'});
It's created with reducer: const store = createStore(reducer);
it's just JS object
{ type: INCREASE_COUNTER }
connect function will do: 1. map state in store (there is only one app state) to component props 2. make action functions as available as component props
morph state to another state
store calls it and updates itself with the result
Reducer gets which part of state?
Depending on the key in the combinedReducers
Don't forget to have reducer for every key in your store, otherwise you'll see error: 'Unexpected keys':
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.jsx It's REPLACING the props, not just change something inside of the props.
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.
Action will be available as props only if you do . See connect.
See and
See
Still in discussion: