BlogPost 406
Discuss in words something you learned in class today or this week.
This week I learned how to create a backend with express and how to make your back end and front end live in the same folder and run on the same port to serve data from your api.
This article helped me: https://dev.to/loujaybee/using-create-react-app-with-express
The two most helpful bits of code are: app.use(express.static(path.join(__dirname, 'build')));
and:
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});and then in package.json: "proxy": "http://localhost:8080"
What are “actions” in Redux?
Actions are js objects that are received by the Reducer to update the global state object. All actions require a ‘type’ property. The type is a string that describes the action. the convention is to write action types in all caps and underscrores: {type: ‘USER_LOGS_IN’} actions may have another property which is often called ‘value’ or ‘payload’. If a user logs in for example, the payload might be the user id or the response from the database which may have additional information about the user.
What is the role of reducers in Redux?
Reducers receive actions and update the global state object as needed. Reducers conventionally use a switch statement that evaluates the type property of the action so the reducer knows how to update the state.
If the type is ‘USER_LOGS_IN’ the reducer might say:
let newState = {…state}; newState.userId = payload.id; return newState.
Get Patrick’s stories in your inbox
Join Medium for free to get updates from this writer.
In this case the old state was ‘cloned’ so that the new object can be manipulated and returned, to follow principles of immutability.
What is the meaning of “single source of truth” in Redux?
Single source of truth means that one object, the global state object, holds data that won’t be contradicted in the other components of a redux app.
Explain the components of Redux.
The state.js file in the Redux app holds the initial global state of the app. There must be a reducer assigned to every property in global state. ‘userLoggedIn: false’ ‘userBusinesses: []’
The actions file contains functions that return actions that will be sent to the reducer via dispatch(). const logsIn = () => return ({type:’USER_LOGS_IN’})
The container component wraps components that need access to global state or actions that are used to update global state. mapStateToProps gives the wrapped component access to any global state properties you want to send it, and mapDispatchToProps gives the wrapped component to any actions you want the component to have, imported from actions.js. So the container can pull properties from global state and actions from actions and give it to the wrapped component. The actions are wrapped in dispatch when given to the component.
Within the component itself, global state and actions are now accessible via props. onClick=()=>{props.login} <h1>props.isLoggedIn<h1> In this sense functional components within a redux app shouldn’t appear any different from non-redux components.
When the component’s action is triggered, since that function is wrapped in dispatch, it dispatches the action to the reducer. The reducer takes in the action and updates the state as instructed.
The Store object takes in the reducers and state to create the redux store, which is the core of Redux. The store.js is the glue of the redux app. Any middleware like thunk or enhancers like redux devtools need to be imported and used in the store.js. Multiple enhancers must be composed together, such as by using redux’s compose() method (which also must be imported from redux before use.)
Which (if there is) node library method could you use to solve the algorithm problem you solved last night in your pre-homework.
“How is an iterative quicksort algorithm implemented?”
The sort() method built in to the array.prototype api would be easiest to quickly sort an array in a practical application.
Which (if there is) node library method could you use to solve the algorithm problem you solved in class tonight?
I don’t know yet of any node.js libaries that would have this utility function.
