Abhik
4 min readDec 31, 2019

--

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);

--

--

Abhik

Interested in frontend developement & UI design