markdown Fluxo de trabalho com redux

Posted 2021-05-05

## store/actions/todos.js
```js
export const addTodo = text => ({ type: 'ADD_TODO', payload: { text } });
```
## store/reducers/todos.js
```js
const INITIAL_STATE = [
  { id: 1, text: 'Estudar pra caralho' },
  { id: 2, text: 'Estudar mais ainda' },
  { id: 3, text: 'Por em prática!' },
];

export default function todos(state = INITIAL_STATE, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { id: Math.random(), text: action.payload.text }];
    default:
      return state;
  }
}
```

### store/reducers/index.js
```json
import { combineReducers } from 'redux';
import todos from './todos';

export default combineReducers({ todos });
```
## store/index.js
```js
import { createStore } from 'redux';

import reducers from './reducers';

const store = createStore(reducers);

export default store;
```
### components/TodoList/index.js
```js
import React, { Fragment } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';

import * as TodoActions from '../../store/actions/todos';

const TodoList = ({ todos, addTodo }) => (
  <Fragment>
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
    <button type="button" onClick={() => addTodo('Voltar e fazer novamente!')}>
      Adicionar Todo
    </button>
  </Fragment>
);

TodoList.propTypes = {
  addTodo: PropTypes.func.isRequired,
  todos: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number,
      text: PropTypes.string,
    }),
  ).isRequired,
};

const mapDispatchToProps = dispatch => bindActionCreators(TodoActions, dispatch);

const mapStateToProps = ({ todos }) => ({ todos });

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(TodoList);
```
### App.js
```js
import React from 'react';
import { Provider } from 'react-redux';

import TodoList from './components/TodoList';
import store from './store';

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

export default App;
```