redux:http://www.redux.org.cn/
react-redux:http://cn.redux.js.org/docs/react-redux
react-router:https://www.npmjs.com/package/react-router
一、安装
$ npm redux react-redux react-router --save
二、创建store
store/index.js
import {createStore} from 'redux';
function toDo(state, action) {
state = state || {name: 'tom'};
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')
);
registerServiceWorker(); // 用于生产环境cache数据
五、组件(页面)使用
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 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);
更多使用,请查看官方文档。
网友评论