react自学(5) redux的使用

1.安装命令

执行下面的命令:

npm install redux react-redux redux-thunk

会在package.json里面有3个插件

2.设置规则

在/src/state/calculates下新建文件:calculate.js

const calculate = (state = 0, action) => {
    switch (action.type) {
        case "add":
            return state + action.num;
        case "delete":
            return state - action.num;
        default:
            return state;
    }
}
export default calculate;

3.使用combineReducers

在/src/state/calculates下新建文件:calculateIndex.js

import { combineReducers } from "redux";
import calculate from "./calculate";

const calculates = combineReducers({
    num: calculate
});
export default calculates;

4.创建action方法

在src/state/actions/下新建action.js

export const addA = (num) => {
    return (dispatch) => {
        dispatch({
            type: 'add',
            num: num
        })
    }
}

export const deleteA = (num) => {
    return (dispatch) => {
        dispatch({
            type: 'delete',
            num: num
        })
    }
}

5.创建store

在/src/state/下新建store.js

import { createStore, applyMiddleware } from 'redux';
import calculates from './calculates/calculateIndex';
import thunk from 'redux-thunk';

export const store = createStore( //引入store
    calculates,
    {},
    applyMiddleware(thunk)
);

export * as actionCreators from './actions/action' // 引入action

6.使用Provider和store

在src/index.js文件中

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';//引入Provider
import { store} from './state/store';//引入store

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}> //使用store
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

7.使用useSelector和useDispatch

在src/App.js文件中

import { BrowserRouter } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux';// 引入
import { bindActionCreators } from 'redux';// 引入
import { actionCreators } from './state/store';// 引入

function App() {
  const num = useSelector((state)=>state.num);
  const dispatch = useDispatch();
  const { addA, deleteA } = bindActionCreators(actionCreators, dispatch);
  

  return (
    <BrowserRouter>
      <div className="container">
        <h1>{num}</h1>
        <button onClick={()=>addA(100)}>加100</button>
        <button onClick={()=>deleteA(100)}>减100</button>
      </div>
    </BrowserRouter>
  );
}

export default App;