react中redux的配置

安装依赖包

npm i redux react-redux redux-thunk redux-devtools-extension

在src下创建目录结构

新建文件 store/index.ts

import reducer from './reducer/'
import { composeWithDevTools } from 'redux-devtools-extension'
import thunk from 'redux-thunk'
import { applyMiddleware, createStore } from 'redux'
const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))

export default store

新建文件 store/reducers/index.ts

import { combineReducers } from 'redux'
import todos from './todos'
const rootReducer = combineReducers({
  todos,// 挂载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'  //引入store文件夹下的index
import { Provider } from 'react-redux'   //在react-redux结构出Provider
ReactDOM.render(
  <Provider store={store}>  //用Provider 包裹并传入 sotre
    <App />
  </Provider>,
  document.getElementById('root')
)