programadorEmerson · June 24, 2023 22:45 · Feb 13, 2023 · Feb 13, 2023 · Feb 13, 2023 · Feb 13, 2023
diff --git a/Checklist Redux b/Checklist Redux
@@ -1,144 +0,0 @@
-# Checklist do Redux
-
-*Antes de começar*
-- [ ] pensar como será o *formato* do seu estado global
-- [ ] pensar quais actions serão necessárias na sua aplicação
-
-*Instalação*
-- [ ] npx create-react-app my-app-redux;
-- [ ] npm install --save redux react-redux;
-- [ ] npm install --save @redux-devtools/extension
-
-*Criar dentro do diretório `src`:*
-- [ ] diretório `redux`
-
-*Criar dentro do diretório `redux`*
-- [ ] arquivo `store.js`
-- [ ] diretório `actions`
-- [ ] diretório `reducers`
-
-*Criar dentro do diretório `actions`:*
-- [ ] arquivo `index.js`.
-
-*Criar dentro do diretório `reducers`:*
-- [ ] arquivo `index.js`.
-
-*Criar dentro do arquivo `redux/store.js`:*
-- [ ] importar o createStore
-- [ ] configurar o [Redux DevTools](https://github.com/reduxjs/redux-devtools)
-- [ ] importar o rootReducer
-- [ ] criar e exportar a store
-
-Exemplo:
-
-```js
-import { legacy_createStore as createStore } from 'redux';
-import { composeWithDevTools } from '@redux-devtools/extension';
-import rootReducer from '../reducers';
-
-const store = createStore(rootReducer, composeWithDevTools());
-
-export default store;
-```
-
-*Criar dentro do arquivo `redux/reducers/index.js`:*
-- [ ] estado inicial
-- [ ] criar função reducer com `switch` retornando apenas a opção `default`
-- [ ] criar `rootReducer` usando o `combineReducers`
-- [ ] exportar `rootReducer`
-
-Exemplo:
-
-```js
-import { combineReducers } from 'redux';
-
-const INITIAL_STATE = {};
-
-const exampleReducer = (state = INITIAL_STATE, action) => {
- switch(action.type) {
-   default:
-    return state;
- }
-}
-
-const rootReducer = combineReducers({ exampleReducer })
-
-export default rootReducer;
-```
-
-*No arquivo `index.js`:*
-- [ ] importar a `store`
-- [ ] importar o `Provider`, para fornecer os estados a todos os componentes encapsulados pelo `<App />`
-
-Exemplo:
-
-```js
-// Na importação
-import { Provider } from 'react-redux';
-import store from './redux/store'
-```
-
-```js
-// No render
- <Provider store={ store } >
-   <App />
- </Provider>
-```
-
-*Na pasta `actions/index.js`:*
-- [ ] criar e exportar os actionTypes
-
-Exemplo:
-
-```js
-// ACTIONS TYPES
-export const ADD_EMAIL = 'ADD_EMAIL';
-```
-
-- [ ] criar e export os actions creators necessários
-
-Exemplo:
-
-```js
-// ACTIONS CREATORS
-export const addEmail = (email) => ({
-  type: ADD_EMAIL,
-  email,
-})
-```
-
-*Nos reducers:*
-- [ ] criar os casos para cada action criada, retornando o devido estado atualizado
-
-*Nos componentes que irão ler o estado:*
-- [ ] criar a função `mapStateToProps`
-- [ ] exportar usando o `connect`
-
-```js
-// No import
-import { connect } from 'react-redux';
-
-// Acesso ao estado global
-const mapStateToProps = (state) => ({
-  email: state.email,
-});
-
-// No export
-export default connect(mapStateToProps)(Component)
-```
-
-*Nos componentes que irão modificar o estado:*
-- [ ] Importar a action creator a ser utilizada
-- [ ] Desconstruir o dispatch via props
-- [ ] Utilizar a função dispatch para enviar a action ao reducer
-
-```js
-// No import
-import { addEmail } from '../redux/actions';
-
-// Disparando a action
-const handleClick = () => {
-  const { dispatch } = this.props;
-  dispatch(addEmail('[email protected]'));
-}
-```

diff --git a/Checklist Redux b/Checklist Redux
@@ -0,0 +1,144 @@
+# Checklist do Redux
+
+*Antes de começar*
+- [ ] pensar como será o *formato* do seu estado global
+- [ ] pensar quais actions serão necessárias na sua aplicação
+
+*Instalação*
+- [ ] npx create-react-app my-app-redux;
+- [ ] npm install --save redux react-redux;
+- [ ] npm install --save @redux-devtools/extension
+
+*Criar dentro do diretório `src`:*
+- [ ] diretório `redux`
+
+*Criar dentro do diretório `redux`*
+- [ ] arquivo `store.js`
+- [ ] diretório `actions`
+- [ ] diretório `reducers`
+
+*Criar dentro do diretório `actions`:*
+- [ ] arquivo `index.js`.
+
+*Criar dentro do diretório `reducers`:*
+- [ ] arquivo `index.js`.
+
+*Criar dentro do arquivo `redux/store.js`:*
+- [ ] importar o createStore
+- [ ] configurar o [Redux DevTools](https://github.com/reduxjs/redux-devtools)
+- [ ] importar o rootReducer
+- [ ] criar e exportar a store
+
+Exemplo:
+
+```js
+import { legacy_createStore as createStore } from 'redux';
+import { composeWithDevTools } from '@redux-devtools/extension';
+import rootReducer from '../reducers';
+
+const store = createStore(rootReducer, composeWithDevTools());
+
+export default store;
+```
+
+*Criar dentro do arquivo `redux/reducers/index.js`:*
+- [ ] estado inicial
+- [ ] criar função reducer com `switch` retornando apenas a opção `default`
+- [ ] criar `rootReducer` usando o `combineReducers`
+- [ ] exportar `rootReducer`
+
+Exemplo:
+
+```js
+import { combineReducers } from 'redux';
+
+const INITIAL_STATE = {};
+
+const exampleReducer = (state = INITIAL_STATE, action) => {
+ switch(action.type) {
+   default:
+    return state;
+ }
+}
+
+const rootReducer = combineReducers({ exampleReducer })
+
+export default rootReducer;
+```
+
+*No arquivo `index.js`:*
+- [ ] importar a `store`
+- [ ] importar o `Provider`, para fornecer os estados a todos os componentes encapsulados pelo `<App />`
+
+Exemplo:
+
+```js
+// Na importação
+import { Provider } from 'react-redux';
+import store from './redux/store'
+```
+
+```js
+// No render
+ <Provider store={ store } >
+   <App />
+ </Provider>
+```
+
+*Na pasta `actions/index.js`:*
+- [ ] criar e exportar os actionTypes
+
+Exemplo:
+
+```js
+// ACTIONS TYPES
+export const ADD_EMAIL = 'ADD_EMAIL';
+```
+
+- [ ] criar e export os actions creators necessários
+
+Exemplo:
+
+```js
+// ACTIONS CREATORS
+export const addEmail = (email) => ({
+  type: ADD_EMAIL,
+  email,
+})
+```
+
+*Nos reducers:*
+- [ ] criar os casos para cada action criada, retornando o devido estado atualizado
+
+*Nos componentes que irão ler o estado:*
+- [ ] criar a função `mapStateToProps`
+- [ ] exportar usando o `connect`
+
+```js
+// No import
+import { connect } from 'react-redux';
+
+// Acesso ao estado global
+const mapStateToProps = (state) => ({
+  email: state.email,
+});
+
+// No export
+export default connect(mapStateToProps)(Component)
+```
+
+*Nos componentes que irão modificar o estado:*
+- [ ] Importar a action creator a ser utilizada
+- [ ] Desconstruir o dispatch via props
+- [ ] Utilizar a função dispatch para enviar a action ao reducer
+
+```js
+// No import
+import { addEmail } from '../redux/actions';
+
+// Disparando a action
+const handleClick = () => {
+  const { dispatch } = this.props;
+  dispatch(addEmail('[email protected]'));
+}
+```