React_redux_router【购物车,排序,筛选,详情 redux】

React案例概括：redux(使用)，详情(路由传参)，购物车，筛选，排序

• 首先搭建项目 create-react-app 文件夹名
• App.js
  • 引入store，Provider,样式,路由,连接组件和仓库,注册实例

import React, { Component } from 'react'
import Router from "./router/index"
import "./scss/style.scss"
import {Provider} from "react-redux"
import store from "./store/index"
export default class App extends Component {render() {return (<div className="wrapper"><Provider store={store}><Router></Router></Provider></div>)}
}

在router文件夹下有三个文件

• index.js，routerconfig.js， routerView.js三个文件
• index.js
  • 引入react-router-dom 配置路由，相当于全局配置，在组件中只需传参即可，出现二级路由

import React, { Component } from 'react'
import {BrowserRouter,Switch,Route} from "react-router-dom";
import RouterView from "./routerView";
import routes from "./routerConfig"
function RootRouter(){return <BrowserRouter><RouterView  routes={routes}></RouterView></BrowserRouter>
}
export default RootRouter;

• routerconfig.js
  • 配置路由 懒加载，详情传参，二级路由
  • 懒加载需要在网上找一张动图

import React, { Component } from 'react'
import Loadable from "react-loadable";//懒加载(按需加载)
const loading = () => {return <div><img src={require("../img/timg (1).gif")} alt="" /></div>
}//一级
const Home = Loadable({loader: () => import("../views/home"),loading: loading,
})
const Cinema = Loadable({loader: () => import("../views/cinema"),loading: loading,
})
const Mine = Loadable({loader: () => import("../views/mine"),loading: loading,
})
const Car = Loadable({loader: () => import("../views/car"),loading: loading,
})
const Detail = Loadable({loader: () => import("../views/detail"),loading: loading,
})
const Login =Loadable({loader:()=>import("../views/login"),loading:loading,
})// 二级
const Future = Loadable({loader: () => import("../views/child/future"),loading: loading,
})
const Now = Loadable({loader: () => import("../views/child/now"),loading: loading,
})const routes = [{path: "/home",component: Home,children: [{path: "/home/now",component: Now},{path: "/home/future",component: Future},{path: "/home",redirect: "/home/now"}]},{path: "/cinema",component: Cinema,},{path: "/mine",component: Mine,},{path: "/car",component: Car,},{path: "/login",component: Login,},{path: "/detail/:id",component:Detail,},{path: "/",redirect: "/home"}
]
export default routes;

• routerView.js
  • 封装好得路由,(包括二级路由和重定向)

import React, { component } from 'react'
import { Route, Redirect, Switch, BrowserRouter } from "react-router-dom"function RouterView(props) {let { routes } = props;let routerArr = routes && routes.filter((item, index) => !item.redirect)  //不是重定向的let redirectArr = routes && routes.filter((item, index) => item.redirect).map((item, index) => <Redirect from={item.path} to={item.redirect} key={index} />)return <Switch>{routerArr && routerArr.map((item, index) => {return <Route path={item.path} key={index} render={(props) => {return <item.component  {...props} child={item.children} />}} />}).concat(redirectArr)}</Switch>
}
export default RouterView;

在store文件夹里面有4个文件

• index.js 和 tao.action.js，tao.types.js，reducer.js
  • index.js
  • 需要下载 redux redux-thunk(异步请求数据)

import React, { Component } from 'react'
import {createStore,applyMiddleware,combineReducers} from "redux";
import thunk from "redux-thunk";
import tao from "./tao/reducer"const reducer=combineReducers({tao,
})
const store=createStore(reducer,applyMiddleware(thunk))
window.store=store;
export default store;

• car.actions.js
  • 异步请求数据 首页和影院和详情页的数据

import axios from "axios";
import "../../mock/index"
import {ININ_DATA,GET_LIST,DETAIL_ITEM} from "./car.types";export const creatAction=(dispatch)=>{axios.get("/api/hot").then(res=>{dispatch({type:ININ_DATA,list:res.data[0].movieList})})
}
//影院的数据
export const getlist=(dispatch)=>{axios.get("/api/list").then(res=>{// console.log(res.data)  dispatch({type:GET_LIST,futurelist:res.data.list})})}//详情页的数据
export const DetailList=(id)=>(dispatch)=>{axios.post("/api/getList",{id}).then(res=>{console.log(res.data.data)let data=res.data.data;dispatch({type:DETAIL_ITEM,data})})  
}

• car.types.js

export const ININ_DATA="ININ_DATA"  //正再上映的数据
export const GET_LIST="GET_LIST"  //将来上映的
export const SORT_ITEM="SORT_ITEM" //排序
export const FILTER_ITEM="FILTER_ITEM" //筛选
export const DETAIL_ITEM="DETAIL_ITEM"  //详情
export const ADD_ITEM="ADD_ITEM"  //将数据添加进去购物车
export const JIA_JIAN="JIA_JIAN"  //点击加减 
export const DAN_CHECKED="DAN_CHECKED" //点击单选
export const All_CHECK="All_CHECK"  //全选

• reducer.js
• 对数据里面具体操作

import { ININ_DATA, GET_LIST, SORT_ITEM, FILTER_ITEM, DETAIL_ITEM, ADD_ITEM, JIA_JIAN, DAN_CHECKED, All_CHECK } from "./car.types"//全选
const all = (arr) => {return arr.every(item => item.checked)
}
const sumPrice = (arr) => {  //总价return arr.reduce((prev, cur) => {return prev + (cur.checked ? cur.price * cur.count : 0)}, 0)
}
const sumNum = (arr) => {  //总数return arr.reduce((prev, cur) => {return prev + (cur.checked ? cur.count : 0)}, 0)
}
// let carlist=JSON.parse(Window.localStorage.getItem("carlist")) ? JSON.parse(window.localStorage.getItem("carlist")) :[]
const tao = (state = {list: [], //首页的数据futurelist: [], //电影的数据(加入购物车的总数据)data: {},//详情的数据carlist: [],//新数据allchecked: false, //全选allPrice: 0, //总价allNum: 0, //总数
}, actions) => {switch (actions.type) {case ININ_DATA: //正在上映{state.list = actions.list;return {...state,list: [...state.list]}}case GET_LIST: //将来上映{state.futurelist = actions.futurelistreturn {...state,futurelist: [...state.futurelist]}}case SORT_ITEM:  //排序{let { types } = actions;console.log(types, "types")state.futurelist = state.futurelist.sort((a, b) => {return b[types] - a[types];})return {...state,futurelist: [...state.futurelist]}}case FILTER_ITEM:  //筛选{let { html } = actionslet q = state.futurelist.filter(item => {return item.name === html;})state.futurelist = q;return {...state,futurelist: [...state.futurelist]}}case DETAIL_ITEM: //详情{state.data = actions.data;return {...state,data: { ...state.data }}}case ADD_ITEM:  //添加进入购物车{let { data, id } = actions;let index = state.carlist.findIndex(item => {return item.id === id;})if (index === -1) {data.count = 1;data.checked = false;state.carlist.push(data);} else {state.carlist[index].count++;}// window.localStorage.setItem("carlist",JSON.stringify(state.carlist))return {...state,carlist: [...state.carlist]}}case JIA_JIAN:  //点击加减{let {

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！