React中配置redux

React中配置redux

初始化

npm install

安装依赖

npm i redux react-redux -S

项目目录

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {HashRouter as Router} from 'react-router-dom'
import {Provider} from 'react-redux'
import store from './store'

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

在app.js里面要修改的几个地方

import {Link} from 'react-router-dom'
import {renderRoutes} from 'react-router-config'
import routes from './routes'
import {connect} from 'react-redux'
import {Component} from 'react'
class App extends Component{
  render(){
    return (
      <div className="App">
        <div>
          <Link to="/">这是首页</Link>
          <Link to="/list">这是列表页</Link>
        </div>
        <div>
          {renderRoutes(routes)}
        </div>
      </div>
    );
  }
}

export default connect((props,state)=>Object.assign({},props,state),{})(App)

store文件夹中action里面的内容

export const SET_AGE = 'set_age'
export const SetAge=function(n){
    return {
        type:SET_AGE,
        n:n
    }
}

store文件夹中index里面的内容

import { createStore } from "redux";
import {SET_AGE} from './action'
function user(state={name:'张三',age:16},action){
    switch(action.type){
        case SET_AGE :
        return {
            ...state,
            age:state.age+action.n
        }
        default:
            return state
    }

}

export default createStore(user);

新建list中的路由

import { Component } from "react";
import {connect} from 'react-redux'
import {SetAge} from './../store/action'
class List extends Component{
    FnSetAge(){
        this.props.SetAge(2)
    }
    render(){
        return (<div>
            当前的年龄是:{this.props.age}
            <button onClick={this.FnSetAge.bind(this)}>按钮</button>
        </div>)
    }
}
export default connect((props,state)=>Object.assign({},props,state),{
    SetAge
})(List);

写完后启动项目

npm start