cd ../ # presuming still in previous lab\ncd lab-04\nyarn startWhile we were working on the last lab, the rest of the team was adding lots of new stuff to the app
\nBefore proceeding, let’s look at the progress that has been made:
\nconnect, mapDispatchToProps, mapStateToProps for exampleWhat will we do?
\n\n
export const LIST = 'LIST_EMPLOYEES';\nexport const GET = 'GET_EMPLOYEE';\n
Redux Thunk typically works this way:
\nNow open src/actions/EmployeeActionCreator.js so we can create the actions.
\nWe’ll import the types we just created, and the Axios library to handle our http requests.
\nimport * as EmployeeActionTypes from './EmployeeActionTypes';\nimport Axios from 'axios';export const list = employees => {\n return {\n type: EmployeeActionTypes.LIST,\n employees: employees,\n };\n};\n\nexport const get = employee => {\n return {\n type: EmployeeActionTypes.GET,\n employee: employee,\n };\n};const apiUrl = '/api/users';\n\nconst url = employeeId => {\n if (employeeId) {\n return `${apiUrl}/${employeeId}`;\n }\n return apiUrl;\n};\n\nexport const listEmployees = () => {\n return dispatch => {\n return Axios.get(url())\n .then(response => {\n dispatch(list(response.data));\n console.log('Employees retrieved.');\n })\n .catch(error => {\n console.log('Error attempting to retrieve employees.', error);\n });\n };\n};\n\nexport const getEmployee = id => {\n return dispatch => {\n return Axios.get(url(id))\n .then(res => {\n dispatch(get(res.data));\n return true;\n })\n .catch(error => {\n console.log('There was an error getting the employee');\n });\n };\n};\n\nexport const updateEmployee = employee => {\n return dispatch => {\n return Axios.put(url(employee._id), employee)\n .then(res => {\n dispatch(get(res.data));\n console.log(`Employee : ${employee._id}, updated.`);\n return true;\n })\n .catch(error => {\n console.log('There was an error updating employee.');\n });\n };\n};\n\nexport const removeEmployee = employee => {\n return dispatch => {\n employee.deleted = true;\n\n return Axios.put(url(employee._id), employee)\n .then(res => {\n dispatch(get(res.data));\n console.log(`Employee : ${res.data._id}, was deleted.`);\n return true;\n })\n .catch(error => {\n console.log('Error attempting to delete employee.');\n });\n };\n};\n\nexport const restoreEmployee = employee => {\n return dispatch => {\n employee.deleted = false;\n\n return Axios.put(url(employee._id), employee)\n .then(res => {\n dispatch(get(res.data));\n console.log(`Employee : ${res.data._id}, was restored.`);\n return true;\n })\n .catch(error => {\n console.log('Error attempting to restore employee.');\n });\n };\n};\n\nexport const createEmployee = employee => {\n return dispatch => {\n return Axios.post(url(), employee)\n .then(res => {\n dispatch(get(res.data));\n console.log(`Employee : ${res.data._id}, created.`);\n return true;\n })\n .catch(error => {\n console.log('There was an error creating employee.');\n });\n };\n};import configureMockStore from 'redux-mock-store';\nimport thunk from 'redux-thunk';\nimport * as actions from './EmployeeActionCreator';\nimport * as types from './EmployeeActionTypes';\nimport moxios from 'moxios';\n\nconst middlewares = [thunk];\nconst mockStore = configureMockStore(middlewares);\n\ndescribe('synchronous actions', () => {\n it('list should send objects', () => {\n expect(actions.list(['p1', 'p2'])).toEqual({\n type: types.LIST,\n employees: ['p1', 'p2'],\n });\n });\n\n it('get should send object', () => {\n expect(actions.get('p1')).toEqual({\n type: types.GET,\n employee: 'p1',\n });\n });\n});\n\ndescribe('async actions', () => {\n beforeEach(() => {\n moxios.install();\n });\n\n afterEach(() => {\n moxios.uninstall();\n });\n\n it('creates LIST when fetching employees has been done', () => {\n moxios.stubRequest('/api/users', {\n status: 200,\n response: ['employee1', 'employee2'],\n });\n\n const expectedActions = [\n { type: types.LIST, employees: ['employee1', 'employee2'] },\n ];\n const store = mockStore({ employees: [] });\n\n return store.dispatch(actions.listEmployees()).then(() => {\n // return of async actions\n expect(store.getActions()).toEqual(expectedActions);\n });\n });\n\n it('create GET when requesting single employee', () => {\n moxios.stubRequest('/api/users/1', {\n status: 200,\n response: 'employee1',\n });\n\n const expectedActions = [{ type: types.GET, employee: 'employee1' }];\n const store = mockStore({ employees: [] });\n\n return store.dispatch(actions.getEmployee(1)).then(() => {\n // return of async actions\n expect(store.getActions()).toEqual(expectedActions);\n });\n });\n\n it('create GET when updating a employee', () => {\n moxios.stubRequest('/api/users/1', {\n status: 200,\n response: 'employee1',\n });\n\n const expectedActions = [{ type: types.GET, employee: 'employee1' }];\n const store = mockStore({ employees: [] });\n\n return store.dispatch(actions.updateEmployee({ _id: 1 })).then(() => {\n // return of async actions\n expect(store.getActions()).toEqual(expectedActions);\n });\n });\n\n it('create GET when removing a employee', () => {\n moxios.stubRequest('/api/users/1', {\n status: 200,\n response: 'employee1',\n });\n\n const expectedActions = [{ type: types.GET, employee: 'employee1' }];\n const store = mockStore({ employees: [] });\n\n return store.dispatch(actions.removeEmployee({ _id: 1 })).then(() => {\n // return of async actions\n expect(store.getActions()).toEqual(expectedActions);\n });\n });\n\n it('create GET when restoring a employee', () => {\n moxios.stubRequest('/api/users/1', {\n status: 200,\n response: 'employee1',\n });\n\n const expectedActions = [{ type: types.GET, employee: 'employee1' }];\n const store = mockStore({ employees: [] });\n\n return store.dispatch(actions.restoreEmployee({ _id: 1 })).then(() => {\n // return of async actions\n expect(store.getActions()).toEqual(expectedActions);\n });\n });\n});Let’s take a look at what we are doing here. - First we’re testing that the synchronous actions are creating packets of type LIST and GET. - Then in the asynchronous tests we are using moxios to http response for our axois requests, and we’re using the redux-mock-store’s configureMockStore to mock our redux store so we can dispatch or actions and test them. - Finally, we are using those mocks to see that the async actions generate the packets we expect when dispatched.
\nMake sure the tests pass and move on to the next section.
\n\n
import * as EmployeeActionTypes from '../actions/EmployeeActionTypes';\n\nexport default (state = { data: [] }, action) => {\n switch (action.type) {\n case EmployeeActionTypes.LIST:\n return { ...state, data: action.employees };\n case EmployeeActionTypes.GET:\n const updatedItem = action.employee;\n const index = state.data.findIndex(d => d._id === updatedItem._id);\n if (index >= 0 ) {\n const copy = [...state.data];\n copy.splice(index, 1, updatedItem);\n return { ...state, data: copy };\n }\n return { ...state, data: [...state.data, updatedItem] };\n default:\n return state;\n }\n};When the reducer receives a LIST action it will replace the currently-stored list of employees with the new one from the action’s payload
\nWhen a GET is received the reducer will attempt to replace the existing version of that employee in state, or will add to the end of the list if it’s a new item
\nNow let’s add our employee-reducer to the combined reducer
\nOpen src/reducers/index.js
\nImport the employee-reducer
\nimport employees from './employee-reducer';const rootReducer = combineReducers({\n projects: projects,\n timesheets: timesheets,\n timeunits: timeunits,\n employees: employees,\n});\n
import { connect } from 'react-redux';\nimport * as EmployeeActionCreators from '../actions/EmployeeActionCreator';const mapStateToProps = state => {\n return {\n employees: state.employees.data,\n };\n};\n\nconst mapDispatchToProps = {\n listEmployees: EmployeeActionCreators.listEmployees,\n deleteEmployee: EmployeeActionCreators.removeEmployee,\n restoreEmployee: EmployeeActionCreators.restoreEmployee\n};export default connect(mapStateToProps, mapDispatchToProps)(Employees); componentDidMount() {\n const { listEmployees } = this.props;\n listEmployees();\n }This allows the following to happen:
\nlistEmployees activitymapStateToProps - this will take the data from Redux and pass it into our component as a propNow we update the data we are passing to the EmployeeTable in the render method. Note that we’re now pulling employees from props since React-Redux pulls them from global Redux state and adds them to the components props in mapStateToProps
We also pass down two of the actions we’re getting from mapDispatchToProps so that they can be called from a row
const { employees, deleteEmployee, restoreEmployee } = this.props;\n\nreturn (\n <div>\n <h1>Employees</h1>\n <EmployeeTable employees={ employees } onDelete={deleteEmployee} onRestore={restoreEmployee} />\n </div>\n);const { employees, onDelete, onRestore } = this.props;\n...\n{employees.map(employee => (\n <EmployeeRow employee={ employee } key={ employee._id } onDelete={onDelete} onRestore={onRestore} />\n))}EmployeeTable.propTypes = {\n employees: PropTypes.array.isRequired,\n onDelete: PropTypes.func,\n onRestore: PropTypes.func\n};<th>Delete</th>Now let’s open src/employees/EmployeeRow.js and add the delete/restore functionality
\nImport the Bootstrap Button component
\nimport { Button } from 'react-bootstrap';<td>\n <Button onClick={this.handleClick} bsStyle={employee.deleted ? 'success' : 'danger'}>\n {employee.deleted ? 'Restore' : 'Delete'}\n </Button>\n</td><tr className={employee.deleted ? 'deleted' : ''}>handleClick = (event) => {\n const { employee, onDelete, onRestore } = this.props;\n\n if (employee.deleted) {\n onRestore(employee);\n } else {\n onDelete(employee);\n }\n \n event.stopPropagation();\n};EmployeeRow.propTypes = {\n employee: PropTypes.object.isRequired,\n onDelete: PropTypes.func.isRequired,\n onRestore: PropTypes.func.isRequired\n};\n
import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Button } from 'react-bootstrap';\n\nclass EmployeeRow extends React.Component {\n handleClick = (event) => {\n const { employee, onDelete, onRestore } = this.props;\n\n if (employee.deleted) {\n onRestore(employee);\n } else {\n onDelete(employee);\n }\n \n event.stopPropagation();\n };\n\n render() {\n const { employee } = this.props;\n\n return (\n <tr className={employee.deleted ? 'deleted' : ''}>\n <td>{employee.username}</td>\n <td>{employee.email}</td>\n <td>{employee.firstName}</td>\n <td>{employee.lastName}</td>\n <td>{employee.admin ? 'Yes' : 'No'}</td>\n <td>\n <Button onClick={this.handleClick} bsStyle={employee.deleted ? 'success' : 'danger'}>\n {employee.deleted ? 'Restore' : 'Delete'}\n </Button>\n </td>\n </tr>\n );\n }\n}\n\nEmployeeRow.propTypes = {\n employee: PropTypes.object.isRequired,\n onDelete: PropTypes.func.isRequired,\n onRestore: PropTypes.func.isRequired\n};\n\nexport default EmployeeRow;\n
If you haven’t already done so,
\nyarn start to fire off the build.Did your application display any data? Look at your console to see the reported “Proxy error”. This gives us a clue that we need to start our backend server to start supplying the data to our application.
\nyarn start frontend running, but now open a 2nd console window—or a separate tabCheckout the backend API server project from Github.
\n$ git clone https://github.com/objectpartners/react-redux-api.gitYou should get output similar to below:
\nCloning into 'react-redux-api'...\nremote: Counting objects: 6272, done.\nremote: Compressing objects: 100% (2493/2493), done.\nremote: Total 6272 (delta 3534), reused 6260 (delta 3523), pack-reused 0\nReceiving objects: 100% (6272/6272), 2.31 MiB | 4.05 MiB/s, done.\nResolving deltas: 100% (3534/3534), done.\nChecking connectivity... done.Change directories into the API main directory.
\n$ cd react-redux-apiInstall the backend API NPM dependencies
\n$ yarnRun the backend API server
\n$ yarn start\n
git add .\ngit commit -m "I think I know redux now?!"