美文网首页前端开发
redux、react-redux、react-router入门

redux、react-redux、react-router入门

作者: 小程序前端超市 | 来源:发表于2018-12-05 16:42 被阅读6次

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);

更多使用,请查看官方文档。

相关文章

网友评论

    本文标题:redux、react-redux、react-router入门

    本文链接:https://www.haomeiwen.com/subject/jbjwcqtx.html