Photo by Joshua Aragon on Unsplash
export const INCREMENT = “INCREMENT”;export const DECREMENT = “DECREMENT”;export const ADDTODO = “ADDTODO”;export const EDITTODO = “EDITTODO”;export const DELETETODO = “DELETETODO”;
export const increment = () => {
return {
type: types.INCREMENT,
};};export const decrement = () => {return {type: types.DECREMENT //NO ARGUMENTS R PASSED SO RETURNING ONLY TYPE};};export const completed = id => {return {type: types.COMPLETED,id};};export const edittodo = (text, id) => { //ARGUMENTS R PASSED AND R RETURNING THEM ALONG WITH TYPEreturn {type: types.EDITTODO,text: text,id: id};};export const deletetodo = item => {return {type: types.DELETETODO,item: item};};
export const todos = [];const tdo = (state = todos, action) => {switch (action.type) {case types.ADDTODO: //HERE THIS FUNCTION IS MATCHED WITH THE DISPATCHED ACTION’S TYPE THEN IT IS CALLED IF MATCHEDreturn updateList(state, { //THE LIST IS UPDATED WITH NEW VALUESid: action.id,text: action.text,completed: false});case types.EDITTODO:return state.map(todo =>todo.id === action.id ? { …todo, text: action.text } : todo);}}export default tdo;
const initialState = {counter: 0};export const increment = (state, action) => { //VALUE OF THE COUNTER IS INCREMENTEDreturn updatedObj(state, { counter: action.counter });};export const decrement = (state, action) => {return updatedObj(state, { counter: state.counter — 1 });};const reducer = (state = initialState, action) => {switch (action.type) {case types.INCREMENT:return increment(state, action); //HERE IT IS MATCHED WITH THE DISPATCHED ACTION’S TYPE THEN IT IS CALLED IF MATCHEDcase types.DECREMENT:return increment(state, action);default:return state;}};export default reducer;
import { createStore, applyMiddleware, compose } from “redux”;import { Provider } from “react-redux”;import rootReducer from “./store/reducers”; //THIS IS THE REDUCERimport thunk from “redux-thunk”;import BasicLayout from “./Layout”; //THIS IS THE BASE COMPONENTconst composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; //THIS IS NEEDED FOR REDUX DEVTOOLS CHROMEconst store = createStore(rootReducer,composeEnhancers(applyMiddleware(thunk)) //MIDDLEWARE IS APPLIED WITH THUNK BECOZ IT WILL HELP IN ASYNCHRONUS ACTIONS);ReactDOM.render(<Provider store={store}> //WRAPPING OF BASE USING PROVIDER<BasicLayout /></Provider>,document.getElementById(“root”));
const mapStateToProps = state => {return {counter: state.counter.counter};};export default connect(mapStateToProps)(App); //HERE IS HOW IT IS CONNECTED TO HEADER (U NEED TO IMPORT CONNECT THOUGH)<h4>{this.props.counter}</h4> // HERE IS HOW IT IS ACCESSED AND USED
constructor(props) {super(props);this.state = {name: “”};}onSubmit = e => {e.preventDefault();const name = this.state.name;this.props.addTodo(name);//calling the function mapped to propsthis.setState({ name: “” });};onChange = e => {this.setState({ name: e.target.value });};
<div className=”container”>// inside rendering jsx component<form onSubmit={this.onSubmit}><Inputvalue={this.state.name}onChange={this.onChange}placeholder=”enter todo items”/></form></div>const mapDispatchToProps = dispatch => {return {
//mapping action disapatch to a function to props
addTodo: text => dispatch(addtodo(text))
};
};
//connecting to App component
export default connect(mapStateToProps, mapDispatchToProps)(App);

--

--

--

Interested in frontend developement & UI design

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

iOS Native Module on React Native

Creating Linked Lists In JavaScript

My Favorite Coding Interview Task for Frontend Developers

Combing Actions with Redux getState

Easily hack fundamental JavaScript concepts with example

Callbacks & Higher Order Functions

5 steps setting React JS unit test with Jest

5 Less Known console methods in Javascripts

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhik

Abhik

Interested in frontend developement & UI design

More from Medium

Redux Persist In React Application

Guide to interviews — React edition

Redux working system

Redux, Basic