Connect is a function communicates with the Provider.
Redux Example: Let's understand with a complete example.
import React, { Component } from "react";
import { createStore } from 'redux';
/**
* This is a reducer, a pure function with (state, action) => state signature.
* It describes how an action transforms the state into the next state.
*
* The shape of the state is up to you: it can be a primitive, an array, an object,
* or even an Immutable.js data structure. The only important part is that you should
* not mutate the state object, but return a new object if the state changes.
*
*/
// Let's make a language reducer - langReducer
const initialState = {
lang_code: "en"
};
const langReducer = (state = initialState, action) => {
let newState = {...state}; //make a copy of initialState
if (action.type === "SET_LANGUAGE") {
newState.lang_code = action.lang_code;
}
return newState;
};
// Create a Redux store holding the state of your app.
let store = createStore(langReducer)
// The only way to mutate the internal state is to dispatch an action.
store.dispatch({
type: "SET_LANGUAGE",
lang_code: "hi"
});
// You can use subscribe() to update the UI in response to state changes.
store.subscribe(() => console.log(store.getState()))
Note:
It is just a basic example (All in One File), that help will help to understand redux implementation.
In Real Apps, You can organize your code in better ways, easier to maintaine & reuse etc.
