模板之React项⽬框架搭建React项⽬框架搭建
创建React项⽬
1. 创建项⽬
npx create-react-app demo(项⽬名称)
cd demo
2. 下载依赖
npm i antd node-sass --save
使⽤react-redux
1. 下载依赖
npm install redux react-redux redux-saga redux-devtools js-base64 --save
2. ⽬录结构
3. store
index.js
// createStore 创建store对象，保存state
// applyMiddleware 使⽤中间件
// compose 从右到左组合函数
import{ createStore, applyMiddleware, compose }from"redux";
// createSagaMiddleware 创建saga对象
import createSagaMiddleware from'redux-saga';
import{ Base64 }from'js-base64';
import reducers from'./reducers';
import rootSaga from"./sagas";
const sagaMiddleware =createSagaMiddleware();
// 扩展浏览器⼯具
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// store 的默认值
let defaultState ={
userInfo:{}
}
const localRedux = Item('redux');
if(localRedux){
defaultState =JSON.parse(Base64.decode(localRedux));
}
export default createStore(
reducers,
defaultState,
composeEnhancers(
applyMiddleware(sagaMiddleware)
)
)
sagaMiddleware.run(rootSaga);
actions
action-type.js
定义动作类型常量，可以根据实际需要来确定是否使⽤这个⽂件，如果是⼤型项⽬，建议使⽤。
export const LOGIN='LOGIN';
export const TEST1='TEST1';
export const TEST2='TEST2';
export const SAVA_USER_INFO='SAVA_USER_INFO';
index.js
import{SAVA_USER_INFO}from'./action-type';
// 保存⽤户信息
export const saveUserInfo=(payload)=>{
return{
type:SAVA_USER_INFO,
payload
}
}
reducers
index.js
import{ combineReducers }from"redux";
import userInfo from"./userInfo";
export default combineReducers({
userInfo
});
userInfo.js
import{SAVA_USER_INFO}from'../actions/action-type';
export default function(state={}, actions){
pe){
case SAVA_USER_INFO:{
return actions.payload;
}
default:{
return state;
}
}
}
saga
index.js
redux-saga 可以处理异步操作。
import{ all }from'redux-saga/effects';
import loginSaga from'./loginSaga';
import testSaga from"./testSaga";
export default function*rootSaga(){
yield all([
loginSaga,
testSaga
])
}
loginSaga.js
import{ put, call, takeEvery }from'redux-saga/effects'; import{LOGIN}from"../actions/action-type";
function*login(actions){
console.log('loginSaga:', actions);
}
export default function*(){
yield takeEvery(LOGIN, login);
}
testSaga.js
import{ put, call, takeEvery }from'redux-saga/effects';
import{TEST1,TEST2}from"../actions/action-type";
function*test1(actions){
console.log('test1Saga:', actions);
}
function*test2(actions){
console.log('test2Saga:', actions);
}
export default function*(){
yield takeEvery(TEST1, test1);
yield takeEvery(TEST2, test2);
}
4. 项⽬引⼊store
4.1 根组件挂载store
src/ index.js
import React from'react';
import ReactDOM from'react-dom';
import{ Provider }from"react-redux";
import'./index.scss';
import App from'./components/App';
import store from'./redux';
<Provider store={store}>
<App />
</Provider>,
);
4.2 组件中使⽤store
以App组件为例。
App/index.jsx
容器组件
import{ connect }from"react-redux";
import App from'./App';
import{ saveUserInfo }from"../../redux/actions";
function mapStateToProps(state, ownerProps={}){
return{
...state,
...ownerProps
}
}
function mapDispatchToProps(dispatch){
react开发框架
return{
saveUserInfo:(userInfo ={})=>{
dispatch(saveUserInfo(userInfo));
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
App/App.jsx
功能组件
import React,{ Component }from"react";
import{ Button }from"antd";
import{ Base64 }from"js-base64";
import'./index.scss';
class App extends Component {
componentDidMount(){
window.addEventListener('beforeunload',this.handleBeforeUnload);
}
componentWillUnmount(){
}
handleBeforeUnload=()=>{
const{ userInfo }=this.props;
window.sessionStorage.setItem('redux', de(JSON.stringify({ userInfo }))) }
render(){
return(
<div className="App">
App Component
<Button onClick={()=>this.props.saveUserInfo({name:'gaoli'})}>
保存⽤户信息
</Button>
</div>
);
}
}
export default App;
使⽤react-router
1. 下载依赖⽂件
npm i react-router-dom --save
2. src/index.js

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。