Redux
Introduction
Redux is a predictable state vessel designed to help you write JavaScript apps that bear constantly across client,server and native surroundings and are easy to test.
While it's substantially used as a state operation tool with ReactJs, you can use it with any other JavaScript frame or library like Angular, Vue.js and.. It's featherlight at 2KB ( including dependences), so you do not have to worry about it making your operation's asset size bigger.
With Redux, the state of your operation is kept in a store, and each element can pierce any state that it needs from this store.
Why should we use Redux(what problem does Redux solve)?
What to learn can be an inviting question for a JavaScript inventor. It helps to constrict the range of options by learning one thing at a time and fastening on problems you find in your work. Redux is a pattern for managing operationstate.However, you might find the benefits of Redux harder to understand, If you don't have problems with state operation. Some UI libraries (like React) have their own state operationsystem.However, especially if you're just learning to use them, we encourage you to learn the capabilities of that erected-in system first, If you're using one of these libraries. It might be all you need to make yourapplication.However, also it's a good time for Redux to come to the scene, If your operation becomes so complex that you're confused about where state is stored or how state changes.
1. Redux makes the state predictable
In Redux, the state is alwayspredictable.However, the same result is always produced because reducers are pure functions (if you do not know about pure function, I recommend you to read this composition), If the same state and action are passed to a reducer. The state is also inflexible ( noway changed). This makes it possible to apply laborious tasks like horizonless undo and redo.
2. easy Debugging with Redux
Redux makes it easy to remedy an operation. By logging conduct and state, it's easy to understand rendering crimes, network crimes, and other forms of bugs that might come up during product. For medium and large-scale apps, debugging takes further time also actually developing features. Redux DevTools makes it easy to take advantage of all Redux has to offer.
3. Ease of testing
It is easy to test Redux apps since functions used to change the state of pure functions.
4. Server-side rendering
Redux can also be used for garçon- side picture. With it, you can handle the original render of the app by transferring the state of an app to the garçon along with its response to the garçon request. The needed factors are also rendered in HTML and transferred to the druggies.
5. Community and ecosystem
This is a huge plus whenever you're learning or using any library or framework. Having a community behind Redux makes it even more appealing to use.
When and when not to use Redux?
All apps do not need Redux. redux isn't inescapably for every design. It's important to understand the kind of operation that you are erecting, the kinds of problems that you need to break it, and what tools can best break the problems you are facing.
Redux helps you deal with participated state operation, but like any tool, it has trade-offs. It's not designed to be the fastest or shortest way to write law. It's intended to help answer the question"When did a certain slice of state change, and where did the data come from?", with predictable geste. There's further law to write and further generalities to learn. It also adds some indirection to your law, and asks you to follow certain restrictions. It's a trade-off between short term and long term productivity.
What is state management in Redux?
State Operation is basically a way to grease communication and sharing of data across factors. It creates a palpable data structure to represent the state of your app that you can read from and write to. That way, you can see else unnoticeable countries while you are working with them.
Utmost libraries, similar as React, Angular,etc. are erected with a way for factors to internally manage their state without any need for an external library or tool. It does well for operations with many factors, but as the operation grows bigger, managing countries participated across factors becomes a chore. In an app where data is participated between factors, it might be confusing to actually know where a state should live. Immaculately, the data in a element should live in just one element, so participating data among stock factors becomes delicate.
For case, in React, to partake data among siblings, a state has to live in the parent element. A system for streamlining this state is handed by the parent element and passed as props to these stock factors.
How Redux works
The way Redux works is veritably simple. There's a central store that holds the entire state of the operation. Each element can access the stored state without having to shoot down props from one element to another. There are three erecting corridor conduct, store, and reducers. Let's compactly bandy what each of them does. This is important because they help you understand the benefits of Redux and how it's to be used. We will be enforcing a analogous illustration to the login element over but this time in Redux.
Let me tell you what each does.
ACTIONS
In a nutshell, actions are events. Actions send data from the application (user interactions, internal events such as API calls, and form submissions) to the store. The store gets information only from actions. Internal actions are simple JavaScript objects that have a type property (usually constant), describing the type of action and payload of information being sent to the store.
{
type: Signin_FORM_SUBMIT,
payload: {username: ‘jacob’, password: ‘1234’}
}
Actions are created with action creators. That sounds obvious. They are functions which return actions.
function UserAuth(form) {
return {
type: Signin_FORM_SUBMIT,
payload: form
}
}
Calling actions anywhere in the app, then Use the dispatch method, like this :
dispatch(UserAuth(form));
REDUCERS
It’s based on the array reduce method, where it accepts a callback (reducer) and lets you get a single value out of sums of integers, multiple values or an accumulation of streams of values. In Redux, reducers are pure functions that take the current state of the application and an action and then return a new state. Here is a very simple reducer that takes the current state and an action as arguments and then returns the next state:
function Auth(state, action) {
return _.assign({}, state, {
auth: action.payload
});
}
For more complex apps, using the combineReducers() utility provided by Redux is possible (indeed, recommended). It combines all of the reducers in the app into a single index reducer. Every reducer is responsible for its own part of the app's state, and the state parameter is different for every reducer. The combineReducers() utility makes the file structure much easier to maintain.
If an object changes only some values, Redux creates a new object, the values that didn't change will refer to the old object and only new values will be created. That's great for performance.
const rootReducer = combineReducers({
handleAuth: handAuth,
editProfile: editProfile,
ResetPassword: ResetPassword
});
STORE
Store is the object which holds the application state and provides a few helper methods to access the state, dispatch actions and register listeners. The entire state is represented by a single store. Any action returns a new state via reducers. That makes Redux simple and predictable.
import { createStore } from ‘redux’;
let store = createStore(rootReducer);
let authInfo = {username: ‘jacob’, password: ‘1234’};
store.dispatch(UserAuth(authInfo));
Do I need a special build-tool to use Redux?
Redux is originally written in ES6 and transpiled for production into ES5 with Webpack and Babel. You should be able to use it regardless of your JavaScript build process. Redux also offers a UMD build that can be used directly without any build process at all.
Can Redux only be used with React?
Redux can be used as a data store for any UI layer. The most common usage is with React and React Native, but there are bindings available for Angular, Vue, and more. Redux simply provides a subscription mechanism which can be used by any other code. That said, it is most useful when combined with a declarative view implementation that can infer the UI updates from the state changes, such as React or one of the similar libraries available.
Summary
In the end, Redux is a great library, it’s quite good for managing the state of your application. it is used by top companies like Uber, Khan Academy, Twitter, it’s gained a lot of traction and there are some great reasons to use it, but there are also reasons you might not want to use it. Make informed decisions about your tools, and understand the trade-offs involved in each decision.
So that is all that you need to get started with the redux, if you have any doubts you can definetly visit the official documentation of redux.