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.futurelist
                return {
   
                    ...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 } = actions
                let 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 {