react中界面跳轉 A界面跳B界面，返回A界面，A界面狀態保持不變 redux的state方法

時間 2019-12-10

標籤 react 界面返回狀態保持不變 redux state 方法欄目 React 简体版

原文原文鏈接

在上一篇文章中說過了react中界面A跳到B，返回A，A界面狀態保持不變，上篇中使用的是傳統的localStorage方法，如今來使用第二種redux的state方法來實現這個功能react

如今我剛接觸redux，因此可能一些高級方法不是很會用，這邊使用的是很簡單的方法。其實這兩種方法原理差很少，都是經過進行保存原有數據或者從新加載數據來實現redux

我這邊以購物車的商品爲簡單的例子，你們能夠根據本身的場景來增長，原理都是同樣的segmentfault

首先在action.js中定義個保存你數據的方法react-router

// actions.js

// 商品相關
export  const ADD_To_CART = 'ADD_TO_CART';
export  const DELETE_TO_CART ='DELETE_TO_CART';
export  const UPDATE_TO_CART = 'UPDATE_TO_CART';
/*數值相關*/
export const ADD = 'ADD';
export const SUB = 'SUB';
/*標誌相關*/
export const FLAG = 'FLAG';
export function addToCart(product,quantity,unitCost){   //我想要保存的商品列表
    return {
        type: ADD_To_CART,
        payload: {product,quantity,unitCost}
    }
}
export  function flag(flag){   //根據這個flag標誌來判斷是否是加載原有的數據仍是從新請求數據
    return {
        type:FLAG,
        payload:{flag}
    }
}

redux文件夾裏面有三個文件，一個是商品的，一個是標誌的，一個是把這兩個合併到一塊兒的dom

// src/reducers/cart-reducer.js
import {ADD_To_CART, DELETE_TO_CART,UPDATE_TO_CART} from "../action";
//初始化state
const initialState = {
    cart: [
        {
            product: 'bread 700g',
            quantity: 2,
            unitCost: 90
        },
        {
            product: 'milk 500ml',
            quantity: 1,
            unitCost: 57
        }
    ]
}
export default function (state = initialState, action){
    switch (action.type) {
        case ADD_To_CART: {
            return {
                ...state,
                cart:[...state.cart,action.payload]
            }
        }
        case DELETE_TO_CART:{
             return {
                ...state,
                 cart:state.cart.filter((item,key)=>{
                     if(item.product!=action.payload.product){
                         return item;
                     }
                 })
             }
        }
        case UPDATE_TO_CART:{
            return {
                ...state,
                cart:state.cart.map((item,key)=>{
                    if(item.product == action.payload.product){
                        return action.payload
                    }
                    else{
                        return item
                    }
                })
            }
        }
        default : return state
    }
}

// src/reducers/flag-reducer.js
import {FLAG} from '../action'
export default function (state=false,action){
   switch (action.type) {
       case FLAG :
           return action.payload.flag
       default :
           return state
   }
}

import {combineReducers} from 'redux';
import productReducer from './product-reducer';
import cartReducer from './cart-reducer'
import flagSlogn from './flag-reducer'
const allReducer = {
    product:productReducer,
    shoppingCart : cartReducer,
    flagSolgn:flagSlogn
}
const rootReducer = combineReducers(allReducer);
export default  rootReducer

而後建立store.js學習

import {createStore} from 'redux';
import rootReducer from './reducer'
let store = createStore(rootReducer);
export default store

在你的js界面中使用this

import React, {Component} from 'react';
import store from '../store/store'
import {addToCart, deleteToCart, updateToCart,flag} from "../store/action";
import {Link} from 'react-router-dom';
class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            cart: [],
        }
    }
    componentDidMount() {if(store.getState().flagSolgn){ //判斷是否是跳轉了的按鈕，點擊了從子界面返回的時候就加載原有的數據
            this.setState({
                cart:store.getState().shoppingCart.cart
            })
        }
        else{   //沒有點擊，就按照初始化的來
            this.setState({
                cart:[]
            })
            store.dispatch(addToCart('Coffee 500mg', 1, 250));
            store.dispatch(addToCart('Flour lkg', 2, 440));this.setState({
                cart: store.getState().shoppingCart.cart
            })
        }

    }
    addProduct(){
        store.dispatch(addToCart('Green Tea',5,25));
       this.setState({
            cart:store.getState().shoppingCart.cart,
         
        })
    }
    render() {
        const {cart} = this.state;
        return (
            <div>
                <ul>
                {
                  cart.map((item,key)=>{
                      return (
                          <li key={key}><ul><li>{item.product}</li><li>{item.quantity}</li><li>{item.unitCost}</li></ul></li>
                      )
                  })
                }
                </ul>
                <Link to={{pathname:"/HomePage"}}>跳轉子界面</Link>
                <div>
                    <button onClick={this.addProduct.bind(this)}>增長</button>
                </div>
            </div>
        )
    }

}

export default Home;

子界面的內容能夠隨便寫，畢竟你須要的只是，從子界面返回到父界面，父界面中狀態保持不變的效果，你只須要的是在進入子界面的時候，改變這個flag就行了spa

import React, {Component} from 'react';
import store from '../store/store'
import {add, flag, sub} from '../store/action'
class HomePage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count:0
        }
    }
    componentDidMount() {
        store.dispatch(flag(true));  //父界面進入子界面的標誌位
    }

    addCount(){
        store.dispatch(add(2));
        this.setState({
            count:store.getState().product
        })
    }
    subCount(){
        store.dispatch(sub(3));
        this.setState({
            count:store.getState().product
        })
    }
    render() {
        const {count} = this.state;
        return (
            <div>
              子界面獲得store
                {store.getState().shoppingCart.cart[0].product}
                <div>
                <button onClick={this.addCount.bind(this)}>增長</button>
                </div>
                <div>
                <button onClick={this.subCount.bind(this)}>減小</button>
                </div>
                <p>數值: {count}</p>
            </div>
        )
    }
}
export default HomePage;