亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

請問create-react-app怎么配置router和redux?

請問create-react-app怎么配置router和redux?

回首憶惘然 2019-07-03 11:07:11
create-react-app怎么配置router和redux
查看完整描述

4 回答

?
慕標琳琳

TA貢獻1830條經驗 獲得超9個贊

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({

查看完整回答
反對 回復 2019-07-07
?
aluckdog

TA貢獻1847條經驗 獲得超7個贊

通常的情況是:寫游戲的人非常容易接受React的模式,寫服務器端的非常容易接受Angular的模式但是兩者相比React會更容易上手;為啥ionic的項目用React就很難下手了?因為之前ionic的各種組件都寫好了呀,各種拼裝就是了,而用React重構各種組。

查看完整回答
反對 回復 2019-07-07
?
喵喵時光機

TA貢獻1846條經驗 獲得超7個贊

在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.js
import 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;



查看完整回答
反對 回復 2019-07-07
  • 4 回答
  • 0 關注
  • 1643 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號