react-redux搭建简单react class框架

新建项目

yarn create react-app class-demo

启动项目

1. yarn start
2. 启动成功后删除项目中部分原有代码(此处不做说明)

安装库

1. yarn add react-redux
2. yarn add redux

代码说明

此处代码仅展示具体组件中，需要操作全局变量，使得兄弟组件发生改变时的全局变量设置情况，这是针对类组件的定义

项目目录展示

项目具体代码

// index.js
// react-redux 写法
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './redux/Store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
)

// App.js
import React, { Component } from 'react';
import { setUser } from './redux/Action';
import store from './redux/Store';
import { connect } from 'react-redux';

class App extends Component {
    btnClick() {
        store.dispatch(setUser("admin"));
    }
    render() {
        return (
            <div>
                {this.props.user}
                <button onClick={this.btnClick.bind(this)}>点击</button>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        user: state.user
    }
}

export default connect(
    mapStateToProps,
)(App)

// Store.js
import { createStore } from 'redux';
import rootReducer from './Reducers';

let store = createStore(rootReducer);

export default store;

// Reducers.js
const initialState = {
    user:""
}
export default function(state=initialState, action) {
    switch(action.type) {
        case "SET_USER": {
            return {
                ...state,
                user: action.user
            }
        }
        default:
            return state
    }
}

// Action.js
export function setUser(user) {
    return {
        type: 'SET_USER',
        user: user
    }
}