Redux使用

一、Flux

1.1 Flux了解

Flux是一种架构思想，专门解决软件结构问题。它跟MVC架构是同一类的东西，但是更加简单和清晰。Flux存在多种实现。
Facebook FLux是用来构建客户端web应用的应用架构。它利用单向数据流的方式来组合React中的视图组件。它更像一个模式而不是一个正式的框架，开发者不需要太多的新代码就可以快速上手Flux

二、Redux

2.1 使用三大原则

1、state以单一对象存储在store对象中
2、state只读（每次都返回一个新的对象）
3、使用纯函数reducer执行state更新

2.2 项目回顾

还是借用之前电影选项卡的案例来介绍redux，我们在tabbar.module.css中写入代码，来让选项卡样式真正的在底部：

.active {
    color: red;
}
.footerTab {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 0;
    padding: 20px;
}
.footerTab li {
    margin: 0; 
    padding: 0;
    list-style: none;
}

效果如下：

我们将用redux来控制在电影页面点击进入详情页的时候底部栏消失，当返回是底部栏在显示出来。

---

2.3 安装创建redux

运行命令npm i redux，安装redux：

在views文件夹下创建redux文件夹，在redux文件夹下新建actionCreator文件夹，在actionCreator文件夹下新建TabbarActionCreator.js ，写入代码：

function hide() {
    return {
        type: 'hide'
    }
}

function show() {
    return {
        type: 'show'
    }
}

export {
    show, hide
}

在redux文件夹下创建store.js，写入代码：

import { combineReducers, createStore } from "redux";
import TabbarReducer from "./reducers/TabbarReducer";

const reducer = combineReducers({
    TabbarReducer
})

const store = createStore(reducer);

export default store;  

在redux文件夹下新建reducers文件夹，在reducers文件夹下新建TabbarReducer.js ，写入代码：

const TabbarReducer = (preState = {
    flag: true,
    // ...
}, action) => {
    let newState = {...preState}
    switch(action.type) {
        case "hide":
            newState.flag = false
            return newState;
        case "show":
            newState.flag = true
            return newState;
        default: 
            return preState;
    }
}

export default TabbarReducer; 

在FilmRouter/index.js中代码修改成，订阅：

import React, { Component } from 'react'
import FRouter from './Router/ReactRouter'
import Tabbar from './components/Tabbar'
import store from './views/redux/store'

export default class Index extends Component {

  state = {
    isShow: store.getState().TabbarReducer.flag
  }
  // store.subscribe 订阅
  componentDidMount() { 
    store.subscribe(() => {
      console.log('订阅', store.getState()) 
      this.setState({
        isShow: store.getState().TabbarReducer.flag
      })
    })
  }

  render() {
    return (
        <div>
            <FRouter>
                {this.state.isShow && <Tabbar></Tabbar>}
            </FRouter>
        </div>
    )
  }
}

在Details.js函数组件中，进行创建和销毁：

import React, {useEffect} from 'react'
import { hide, show } from './redux/actionCreator/TabbarActionCreator'
import store from './redux/store'

export default function Detaill(props) {
  
  console.log(props.match.params.filmId) // 第一种方式路由获取参数 
//   console.log(props.location.query.filmId) // 第二种方式路由获取参数  
//   console.log(props.location.state.filmId) // 第三种方式路由获取参数  

  useEffect(() => {
    console.log('创建')
    store.dispatch(hide())
    return () => {
      console.log('销毁')
      store.dispatch(show())
    }
  },[])

  return (
    <div>Detaill</div>
  )
}

可以看到我们现在的效果是跨越了组件进行控制底部栏的显示与隐藏：

在学习React的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。