- redux-devtools-extension
- composeWithDevTools(): to tell the redux dev tools that this file contains redux
- redux
- combineReducers()
- createStore()
- applyMiddleware()
- react-redux
- : to provide a store variable to all the components inside of it
- useSelector(): to extract varables in the store
- useDispatch(): to dispatch an action (to update the values of the variables in the store)
- Install redux devtools extention from the chrome webstore
- Give access to use the extension to your code. Refer this
WITHOUT MIDDLEWARES
import { createStore } from 'redux'
const store = createStore( reducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() )
WITH MIDDLEWARES
import { createStore, applyMiddleware } from 'redux'
import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(reducer, composeWithDevTools(applyMiddleware(...middleware)))
const ActionTypes = {
DO_THIS: 'DO_THIS'
}
export default ActionTypes
import { ActionTypes } from './'
const syncActionCreator = data => {
return {
type: ActionTypes.DO_THIS,
payload: data
}
}
export const asyncActionCreator = () => {
return dispatch => {
// perform async task
dispatch(syncActionCreator(data))
}
}
import { ActionTypes } from '../action'
const initState = {
item: []
}
const someReducer = (state=initState, {type, payload}) => {
switch(type){
case ActionTypes.DO_THIS:
return {
...state,
item: payload
}
default:
return state
}
}
export default builderReducer
- const item = useSelector(state => state.item)
- const dispatch = useDispatch()
- dispatch({type:'', payload:''})
- dispatch(actionCreator(payloadData))