when i was following the video tutorial import the @reduxjs/toolkit to the project then the redux-devtools and extension can not dispalyed on the chrome console, i can’t find the reasons and the files code as below:
configureStore.js file:
import { configureStore } from '@reduxjs/toolkit'
import reducer from './bugs'
export default function () {
return configureStore({reducer})
}
bugs.js file:
import { createSlice } from '@reduxjs/toolkit'
let lastId = 0
const slice = createSlice({
name: 'bugs',
initialState: [],
reducers: {
// actions => action handlers
bugAdded: (bugs, action) => {
bugs.push({
id: ++lastId,
description: action.payload.description,
resolved: false,
})
},
bugResolved: (bugs, action) => {
const index = bugs.findIndex((bug) => bug.id === action.payload.id)
bugs[index].resolved = true
},
},
})
export const { bugAdded, bugResolved } = slice.actions
export default slice.reducer
index.js file:
import configureStore from './store/configureStore'
import * as actions from './store/bugs'
import { projectAdded } from './store/projects'
const store = configureStore()
store.subscribe(() => {
console.log('Store changed!')
})
store.dispatch(projectAdded({ name: 'Project 1' }))
store.dispatch(actions.bugAdded({ description: 'Bug 1' }))
store.dispatch(actions.bugAdded({ description: 'Bug 2' }))
store.dispatch(actions.bugAdded({ description: 'Bug 3' }))
store.dispatch(actions.bugResolved({ id: 1 }))
console.log(store.getState())
webpack.config.js file:
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist'),
library: 'my-library',
libraryTarget: 'umd', // exposes and know when to use module.exports or exports.
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 9000,
},
mode: 'development',
devtool: 'source-map',
}
package.json file:
{
"name": "redux-starter",
"version": "1.0.0",
"description": "Redux Starter Project",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js"
},
"keywords": [],
"author": "Mosh Hamedani",
"license": "ISC",
"devDependencies": {
"webpack": "4.41.6",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.10.3"
},
"dependencies": {
"@reduxjs/toolkit": "^1.2.5",
"immer": "^9.0.2",
"immutable": "*",
"lodash": "^4.17.15",
"redux": "4.0",
"redux-devtools-extension": "^2.13.8"
}
}
}
