Redux with React App


Add Redux in dependancies
Actions
Reducer
Store
Higher Order Component
Last updated
Was this helpful?


Add Redux in dependancies
Actions
Reducer
Store
Higher Order Component
Last updated
Was this helpful?
Was this helpful?
"dependencies": {
"axios": "^0.19.0",
"jquery": "^3.4.1",
"prop-types": "15.6.1",
"react": "16.1.1",
"react-dom": "16.1.1",
"react-redux": "5.0.7",
"redux": "3.7.2"
}// types of action
const Types = {
CREATE_ITEM: "CREATE_ITEM",
DELETE_ITEM: "DELETE_ITEM"
};
// actions
const createItem = task => ({
type: Types.CREATE_ITEM,
payload: task
});
const deleteItem = id => ({
type: Types.DELETE_ITEM,
payload: id
});
export default {
createItem,
deleteItem,
Types
};import ACTIONS from "./action";
import _ from "lodash";
const defaultState = {
items: []
};
const todoReducer = (state = defaultState, action) => {
switch (action.type) {
case ACTIONS.Types.CREATE_ITEM: {
console.log(action);
let item = action.payload;
let newItem = { id: state.items.length + 1, description: item };
let newState = _.cloneDeep(state);
newState.items.push(newItem);
return newState;
}
case ACTIONS.Types.DELETE_ITEM: {
let newState = _.cloneDeep(state);
let index = _.findIndex(newState.items, { id: action.payload });
newState.items.splice(index, 1);
return newState;
}
default:
return state;
}
};
export default todoReducer;import { createStore, applyMiddleware } from "redux";
// Logger with default options
import logger from "redux-logger";
import reducer from "./reducer";
export default function configureStore(initialState) {
const store = createStore(reducer, initialState, applyMiddleware(logger));
return store;
}class ToDO extends Component {
// TODO
}
const mapStateToProps = state => ({
items: state.items
});
const mapDispatchToProps = dispatch => ({
createItem: item => dispatch(ACTIONS.createItem(item)),
deleteItem: id => dispatch(ACTIONS.deleteItem(id))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(withStyles(styles)(ToDO));