how-to-integrate-redux.md (2823B)
1 ## How to Integrate [Redux](http://redux.js.org/index.html) 2 3 Merge `feature/redux` branch with Git. If you are interested in `feature/react-intl`, merge that 4 branch instead as it also includes Redux. 5 6 **If you don't know Redux well, you should [read about it first](http://redux.js.org/docs/basics/index.html).** 7 8 9 ### Creating Actions 10 11 1. Go to `src/constants/index.js` and define action name there. 12 13 2. Go to `src/actions/` and create file with appropriate name. You can copy 14 `src/actions/runtime.js` as a template. 15 16 3. If you need async actions, use [`redux-thunk`](https://github.com/gaearon/redux-thunk#readme). 17 For inspiration on how to create async actions you can look at 18 [`setLocale`](https://github.com/kriasoft/react-starter-kit/blob/feature/react-intl/src/actions/intl.js) 19 action from `feature/react-intl`. 20 See [Async Flow](http://redux.js.org/docs/advanced/AsyncFlow.html) for more information on this 21 topic. 22 23 24 ### Creating Reducer (aka Store) 25 26 1. Go to [`src/reducers/`](https://github.com/kriasoft/react-starter-kit/tree/feature/redux/src/reducers) and create new file there. 27 28 You can copy [`src/reducers/runtime.js`](https://github.com/kriasoft/react-starter-kit/tree/feature/redux/src/reducers/runtime.js) as a template. 29 30 - Do not forget to always return `state`. 31 - Never mutate provided `state`. 32 If you mutate state, rendering of connected component will not be triggered because of `===` equality. 33 Always return new value if you perform state update. 34 You can use this construct: `{ ...state, updatedKey: action.payload.value, }` 35 - Keep in mind that store state *must* be repeatable by replaying actions on it. 36 For example, when you store timestamp, pass it into *action payload*. 37 If you call REST API, do it in action. *Never do this in reducer!* 38 39 2. Edit [`src/reducers/index.js`](https://github.com/kriasoft/react-starter-kit/tree/feature/redux/src/reducers/index.js), import your reducer and add it to root reducer created by 40 [`combineReducers`](http://redux.js.org/docs/api/combineReducers.html) 41 42 43 ### Connecting Components 44 45 You can use [`connect()`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) High-Order Component from [`react-redux`](https://github.com/reactjs/react-redux#readme) package. 46 47 See [Usage With React](http://redux.js.org/docs/basics/UsageWithReact.html) on redux.js.org. 48 49 For an example you can look at 50 [`<LanguageSwitcher>`](https://github.com/kriasoft/react-starter-kit/blob/feature/react-intl/src/components/LanguageSwitcher/LanguageSwitcher.js) 51 component from `feature/react-intl` branch. It demonstrates both subscribing to store and dispatching actions. 52 53 54 ### Dispatching Actions On Server 55 56 See source of `src/server.js`