react-redux的使用

复制即可使用，要注意文件的路径

下载依赖

npm install --save react-redux
npm install --save redux-thunk
npm install --save redux

在src目录下创建store文件夹
store下新建index.js文件

import { createStore, applyMiddleware, compose } from 'redux';
// 引入模块化文件
import reducer from './reducer';
import thunk from 'redux-thunk';
// 这里是使用浏览器插件的配置
const composeFn = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose
const enhancer = composeFn(applyMiddleware(thunk))
// 创建并到处仓库
const store = createStore(reducer, enhancer);
export default store;

再创建reducer.js文件，用来存放模块化之后的数据

import { combineReducers } from 'redux';
import HomeReducer from './modules/home'
// 模块化管理状态
let reducer = combineReducers({
    home: HomeReducer,
})
export default reducer

之后去index.js文件，对里面的东西进行修改

import React from 'react';
import ReactDOM from 'react-dom';
// 注意要先写好路由
import Router from './router';
import { Provider } from 'react-redux';
import store from './store/index'

ReactDOM.render(
  <React.StrictMode>
    {/* 使用Provider包裹，再把store传下去，那么就可以使用里面的数据了 */}
    <Provider store={store}>
      <Router />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

store文件夹下新建modules文件夹，用来存放模块化的文件
modules文件夹下新建home.js文件，（这是个例子）

//defaultState这个是仓库里的东西，我们会使用这个数据
const defaultState = {
    num: 1
}
//我们会触发里面的方法，对仓库的东西进行修改
const HomeReducer = (state = defaultState, action) => {
    if (action.type === 'addNum') {
        // 这里写逻辑,还有，一定要JSON.parse(JSON.stringify(state))，不转有坑
        let initState = JSON.parse(JSON.stringify(state));
        initState.num = initState.num + 1;
        return initState;
    }
    return state;
}
export default HomeReducer

在页面中使用

import React from 'react';
import { connect } from 'react-redux';

const Home = (props) => {
    return (
        <div>
            {props.num}
            <button onClick={props.clickButton}>click</button>
        </div>
    );
};

const stateToProps = (state) => {
    return {
        num: state.home.num,
    }
}

//3.这里把action里的方法绑定到props上，可以通过Props使用，一般用于修改store里的数据
const dispatchTOProps = (dispatch) => {
    return {
        clickButton() {
            let action = {
                type: 'addNum',
            }
            // 用dispatch触发Store里的方法
            dispatch(action)
        },
    }
}
//4.通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上
export default connect(stateToProps, dispatchTOProps)(Home);

最后编辑于：2021.04.14 17:45:02