markdown React-Redux动手指南

Posted 2021-05-06

## Table of contents
- Store
  - [Creation](#store-creation)
  - [Injection](#store-injection)
- [Redux chrome devtools](#redux-chrome-devtools)
- [Redux-form](#redux-form)
  - [Reducer](#reducer)
  - [Decorator](#decorator)
  - [Field](#field)
  - [Adapter HoC](#adapterhoc)
  - [Validation](#validation)
- [Data persistance](#data-persistance)
- [React and redux](#redux-and-react)
  - [Ducks and utilities](#ducks-and-utilitites)
  - [Official bindings](#react-redux)
  
Redux is a predictable state container and will be the library used to store the state of the checkout form, as well as any other relevant state that comes up.
This guide assumes you already have a basic knowlegde of what [actions](http://redux.js.org/docs/basics/Actions.html), [reducers](http://redux.js.org/docs/basics/Reducers.html) and a [store](http://redux.js.org/docs/basics/Store.html) is.

The first thing we need to do is to download the libraries `redux` and `react-redux`. The latter contains the necessary bindings for React, so that you don't have to wire things up manually. Keep in mind redux is not uniquely linked to React, redux is agnostic about the framework used for rendering the UI and could also be used with Angular for instance.
```
yarn add redux react-redux
```

## Store creation

Second step is to create a file where we configure our redux store. Normallly that's done by creating a folder called _store_ and placing inside a single file called `configureStore.js` (or `store.js` or `index.js`). The relative location in the project should be `src/js/store/configureStore.js`.

Below you can find the scaffolding of a basic redux store:

```javascript
import { createStore } from 'redux';

const configureStore = () => {
  const reducer = (state = {}, action) => state;
  return createStore(reducer);
};

export default configureStore;

```

`createStore` function takes 3 arguments, but only the first one is required, which is the root reducer.
Remember that a reducer is a function that takes the previous state and an action and calculates the new state of the app. For starters and being able to set up the store, let's just add that dummy reducer function that just returns always `{}`

I like to create a function that wraps the store creation to avoid confussions. ES6 modules are singletons. That is, there's only one instance of the module, which maintains its state. Every time you import that module into another module, you get a reference to the one centralized instance. That means we could have just avoided that function encapsulation and export directly the store as:
```javascript
const reducer = (state = {}, action) => state;

const store = createStore(reducer);

export default store;
```

However, with the encapsulation it may be clearer when we perform the store instantiation (from the root React component), since we'll be calling something like `configureStore()`, stating that's a one-time operation and shouldn't be done from anywhere else.

## Store injection

Once we have defined the store creation, we need to make our React app aware of it. Let's refactor a bit our entry point by:
- Creating an `index.js` file under `src/js/` to conduct React bootstrap into the DOM and setup Hot Module Reloading.
```javascript
import React from 'react';
import { render } from 'react-dom';
import App from './components/App';

render(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept(); // HMR for JS
  // HMR For CSS modules
  document.querySelectorAll('link[href][rel=stylesheet]').forEach((link) => {
    const nextStyleHref = link.href.replace(/(\?\d+)?$/, `?${Date.now()}`);
    link.href = nextStyleHref; // eslint-disable-line no-param-reassign
  });
}
```

- Moving `App.jsx` inside `src/js/components` and using `Provider` component from `react-redux` to inject the store down the tree.
```javascript
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from '../store';
import Header from './Header';

const store = configureStore();

const App = () => (
  <Provider store={store}>
    <Header />
  </Provider>
);

export default App;
```

What `Provider` does is making the store instance available to all children components by using context. Don't give too much credit to context, it's still an experimental React feature, but comes in handy when you want to pass data through the component tree without having to pass the props down manually at every level, hence a perfect suit for our store.

## Redux chrome devTools

Last, but not least, let's leverage the amazing redux chrome extensions:
- Download it from the [Chrome store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
- Go to `configureStore.js` file and make this small tweak.
```javascript
return createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
```

Congratulations! The store setup process is completed and you are realising how easy is to configure it (or maybe it's the amazing writer that is really doing a good job