Redux基础配置

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情 >>

store的基本结构都是固定的套路，注意如下的store:

├── store
│   ├── index.ts      # 
│   └── reducers      # 
│       ├── index.ts  # 
│       └── todos.ts  # 
├── App.tsx           # 根组件
├── index.js          # 项目入口
└── package.json

store/index.ts

import { legacy_createStore as createStore, applyMiddleware } from 'redux'
import reducerRoot from './reducers'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(
  reducerRoot,
  composeWithDevTools(applyMiddleware(thunk, logger))
)
export default store

store/reducers/index.ts

import { combineReducers } from 'redux'
import todos from './todos'
const rootReducer = combineReducers({
  todos,
})
export default rootReducer

store/reducers/todos.ts

const initValue = [
  {
    id: 1,
    name: '吃饭',
    isDone: false,
  },
  {
    id: 2,
    name: '睡觉',
    isDone: true,
  },
  {
    id: 3,
    name: '打豆豆',
    isDone: false,
  },
]
export default function todos(state = initValue, action: any) {
  return state
}

index.tsx中

import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import store from './store'
import { Provider } from 'react-redux'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)
store.subscribe(() => {
  root.render(
    <Provider store={store}>
      <App />
    </Provider>
  )
})