If you struggle to understand or its too wide that you don’t remember all the structure, terminology and steps to apply it, let’s try it again
Redux is a tool to use application leve state to use in large applications, the diagram to start understanding REDUX is the following:
NOW STARTING TO CODE, BECAUSE I THINK ITS EASIER BY PUTTING IT IN PRACTICE
To install react in VS CODE Terminal or directly in our terminal:
npm install -g create-react-app
After installing, we have to create the app:
npx create-react-app nameOfYourApp
Now cd into your app folder, to run the app at the terminal:
npm start
Which should prompt in your browser the react app at the http://localhost:3000/ like this:
It’s handy to install in VSCode the extension ES7 Redux/GraphicQL/React-Native snippets to have some shortcuts for our components
Now to star, let’s create one folder called component, inside two files called Posts.js and Postform.js
In Posts.js type a class based component (rcc):
and the difference with a function (rfc)
add some text in the div like this h1
and import in App.js
import Post from ‘./component/Posts’
Saving both files will render the h1 at the browser
Now using from https://jsonplaceholder.typicode.com/posts the objects to display in our app created, lets type at Posts.js as well:
It will display all the posts from the url using the map function at constant postItems.
We have to use a unique key, in this example we are using post.id, the title with post. title and the content is post.body
At Postsform.js lets create a class with a form:
And it will have no functionality but should look like this:
To be able to type into the forms and register into the current state of the forms lets add the following:
You can check the value with the browser’s console.
The next step is addling the onSubmit={this.onSubmit} to the form, and the function under onChange is the following:
At this point we’ve only used React, now we have to use reducers, dispatch and other gizmos to be able to load our new posts.
So we have to install the following in a new terminal or closing the server (and relaunching after):
npm install redux react-redux redux-thunk
After that, we need to import at App.js {Provider} and wrap the div with it, then create the store and declare it in that provider, create the const store, which needs that const, but for now App.js will look like this:
following step is create a file called store.js at src folder with the following code:
Notice the import rootReducer, so we need to create a folder ‘reducers’ inside of src and a file called ‘index.js’ as well inside of the folder ‘reducers’
Again it requieres a postReducer, so inside of the same folder (reducers) let’s create postReducer.js with the code:
CUMBERSOME I know, but its the way and I don’t know why so many steps, this file requieres to import types, so let’s create in src a folder called actions with the file types.js, thankfully it will have this two constants only:
export const FETCH_POSTS = ‘FETCH_POSTS’
export const NEW_POST = ‘NEW_POSTS’
In the same folder we have to create a new file called postActions.js with the following code
dispatch is a resolver in a promise, in this case it will be passed the payload and the type, also it means that they fetch that use do be at Posts.js is being moved to this file, so now we should change that component and import some components to get it to work and adding for the switch the case FETCH_POST like this:
I don’t know if this is necessary but We did it in class, is adding redux extension compose to stoyre.js but it didn't work with my app:
Creating the function for a new post in postReducer.js:
which make us to change Postform.js importing the following:
import PropTypes from ‘prop-types’
import {connect} from ‘react-redux’
import { createPost } from ‘../actions/postActions’
plus modifying the export to a propType with the following code:
PostForm.propTypes = {
createPost: PropTypes.func.isRequired
}
export default connect(null, {createPost})(PostForm);
To finish in Post.js, we have to apply the changes at mapStateToProps like this
const mapStateToProps = state => ({
posts: state.posts.items,
newPost: state.posts.item
});
And a component called lifecycle method called componentWillReceiveProps:
componentWillReceiveProps(nextProps) {
if (nextProps.newPost) {
this.props.posts.unshift(nextProps.newPost);
}
}
That should do it, to check the files in case I missed something: