全家桶（React+Redux+Router）

目录结构

├─ src
    ├─ routes
    ├─ ├─ index.js
    ├─ store
    ├─ ├─ index.js
    ├─ App.js
    └─ index.js

安装

> npm redux react-redux react-router --save

创建store

store/index.js

import {createStore} from 'redux'

function toDo(state = {name: 'tom'}, action) {
  switch (action.type) {
    case 'CHANGE_NAME':
      return {...state, ...action.payload}
    default:
      return state
  }
}

let store = createStore(toDo)

export default store

创建routes

routes/index.js

import App from '../App'

const routes = [
  {
    path: '/',
    component: App
  }
]

export default routes

导入

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import {Router, browserHistory} from 'react-router'
import {Provider} from "react-redux"

import store from './store'
import routes from './routes'

import registerServiceWorker from './registerServiceWorker'

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>{routes}</Router>
  </Provider>, 
  document.getElementById('root')
)

组件（页面）使用

App.js

import React, {Component} from 'react'
import {connect} from "react-redux"

class App extends Component {
  constructor(props){
    super(props)
  }
  render() {
    return (
      <div>
        {this.props.cName}
        <Button variant="outlined" type="button" onClick={this.changeName.bind(this)}>改变name</Button>
      </div>
    )
  }
  changeName() {
    this.props.changeName({name: 'jack'})
  }
}

// 把state放到props里
function mapStateToProps(state, props) {
  return {
    cName: state.name
  }
}

// 把方法放到props里
function mapDispatchToProps(dispatch, props) {
  return {
    changeName: (payload)=>dispatch({type: 'CHANGE_NAME', payload: payload})
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)