请问create-react-app怎么配置router和redux?

create-react-app怎么配置router和redux


回首忆惘然
浏览 1583回答 4
4回答

慕标琳琳

r store=require('../store/moreStore');var addTodoActions=require('../actions/moreAction');module.exports= React.createClass({getInitialState: function(){return {items: store.getState()};},componentDidMount: function(){store.subscribe(this.onChange);},onChange: function(){this.setState({

aluckdog

通常的情况是:写游戏的人非常容易接受React的模式,写服务器端的非常容易接受Angular的模式但是两者相比React会更容易上手;为啥ionic的项目用React就很难下手了?因为之前ionic的各种组件都写好了呀,各种拼装就是了,而用React重构各种组。

喵喵时光机

在Redux 应用中使用路由功能,可以搭配使用 React Router 来实现。 Redux 和 React Router 将分别成为数据和 URL 的事实来源(the source of truth)。 在大多数情况下, 最好将他们分开,除非需要时光旅行和回放 action 来触发 URL 改变。1、需要从 React Router 中导入 <Router /> 和 <Route />。代码如下:import { Router, Route, browserHistory } from 'react-router';在 React 应用中,通常需要会用 <Router /> 包裹 <Route />。 如此,当 URL 变化的时候,<Router /> 将会匹配到指定的路由,然后渲染路由绑定的组件。 <Route /> 用来显式地把路由映射到应用的组件结构上。 用 path 指定 URL,用 component 指定路由命中 URL 后需要渲染的那个组件。const Root = () => (<Router><Route path="/" component={App} /></Router>);另外,在 Redux 应用中,仍将使用 <Provider />。 <Provider /> 是由 React Redux 提供的高阶组件,用来让开发者将 Redux 绑定到 React 。然后,开发者从 React Redux 导入 <Provider />:import { Provider } from 'react-redux';开发者将用 <Provider /> 包裹 <Router />,以便于路由处理器可以访问 store。const Root = ({ store }) => (<Provider store={store}><Router><Route path="/" component={App} /></Router></Provider>);2、渲染组件现在,如果 URL 匹配到 '/',将会渲染 <App /> 组件。此外,开发者将在 '/' 后面增加参数 (:filter), 当尝试从 URL 中读取参数 (:filter),需要以下代码:<Route path="/(:filter)" component={App} />也可以将 '#' 从 URL 中移除(例如:http://localhost:3000/#/?_k=4sbb0i)。 开发者需要从 React Router 导入 browserHistory 来实现:import { Router, Route, browserHistory } from 'react-router';然后将它传给 <Router /> 来移除 URL 中的 '#':<Router history={browserHistory}><Route path="/(:filter)" component={App} /></Router>只要开发者不需要兼容古老的浏览器,比如IE9,你都可以使用 browserHistory。components/Root.jsimport React, { PropTypes } from 'react';import { Provider } from 'react-redux';import { Router, Route, browserHistory } from 'react-router';import App from './App';const Root = ({ store }) => (<Provider store={store}><Router history={browserHistory}><Route path="/(:filter)" component={App} /></Router></Provider>);Root.propTypes = {store: PropTypes.object.isRequired,};export default Root;
打开App,查看更多内容
随时随地看视频慕课网APP