mirror of
https://github.com/m-lamonaca/dev-notes.git
synced 2025-04-08 11:56:41 +00:00
Improve Store notes
This commit is contained in:
parent
8c2cf41ace
commit
2d669cd200
1 changed files with 19 additions and 4 deletions
|
@ -28,10 +28,21 @@ The store will run its reducer function and save the new state value inside.
|
||||||
|
|
||||||
**Selectors** are functions that know how to extract specific pieces of information from a store state value.
|
**Selectors** are functions that know how to extract specific pieces of information from a store state value.
|
||||||
|
|
||||||
|
In `initialState.js`;
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
export default {
|
||||||
|
// initial state here
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
In `configStore.js`:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// configStore.js
|
||||||
import { createStore, applyMiddleware, compose } from "redux";
|
import { createStore, applyMiddleware, compose } from "redux";
|
||||||
|
|
||||||
function configStore(initialState) {
|
export function configStore(initialState) {
|
||||||
const composeEnhancers =
|
const composeEnhancers =
|
||||||
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // support for redux devtools
|
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // support for redux devtools
|
||||||
|
|
||||||
|
@ -61,7 +72,9 @@ Instead, they must make *immutable updates*, by copying the existing `state` and
|
||||||
- They must not do any asynchronous logic, calculate random values, or cause other "side effects"
|
- They must not do any asynchronous logic, calculate random values, or cause other "side effects"
|
||||||
|
|
||||||
```js
|
```js
|
||||||
function reducer(state, action) {
|
import initialState from "path/to/initialState";
|
||||||
|
|
||||||
|
function reducer(state = initialState, action) {
|
||||||
switch(action.type){
|
switch(action.type){
|
||||||
case "ACTION_TYPE":
|
case "ACTION_TYPE":
|
||||||
return { ...state, prop: value }; // return modified copy of state (using spread operator)
|
return { ...state, prop: value }; // return modified copy of state (using spread operator)
|
||||||
|
@ -108,12 +121,14 @@ Used at the root component and wraps all the application.
|
||||||
// index.js
|
// index.js
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import ReactDOM from 'react-dom'
|
import ReactDOM from 'react-dom'
|
||||||
|
|
||||||
import { Provider } from 'react-redux'
|
import { Provider } from 'react-redux'
|
||||||
import store from './store'
|
|
||||||
|
|
||||||
|
import { configStore } from 'path/to/configStore';
|
||||||
|
import initialState from "path/to/initialState";
|
||||||
import App from './App'
|
import App from './App'
|
||||||
|
|
||||||
|
const store = configStore(initialState);
|
||||||
|
|
||||||
const rootElement = document.getElementById('root')
|
const rootElement = document.getElementById('root')
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
|
|
Loading…
Add table
Reference in a new issue