全家桶(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)