如何从redux导入和加载图像

Question

所以我正在进行这个项目，需要加载一些存储在redux存储中的图像。我正在使用useSelector函数来获取图像，但它们没有显示在我的浏览器中。这是我的代码：

审查.js

import React from "react";
import { useSelector } from "react-redux";
// CSS
import { makeStyles } from "@material-ui/core/styles";
// Material UI
// Layout
import Grid from "@material-ui/core/Grid";
// Text
import Typography from "@material-ui/core/Typography";
const useStyles = makeStyles((theme) => ({
title: {
marginTop: theme.spacing(2),
},
}));
function Review() {
const classes = useStyles();
const product = useSelector((state) => state.productReducer);
return (
<Grid>
<Typography variant="h6" gutterBottom>
Final Product
</Typography>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<Typography variant="h6" gutterBottom className={classes.title}>
{product.Name}
</Typography>
<Typography gutterBottom>Price {product.Price}</Typography>
<Typography gutterBottom>Category {product.Category}</Typography>
<Typography gutterBottom>Ships to {product.Ships_to}</Typography>
</Grid>
<Grid item xs={12} sm={6} container justify="space-evenly">
<Typography variant="h6" gutterBottom>
Display Pics:
</Typography>
<img src={product.Pic1} width="200" height="200" alt="" />
<img src={product.Pic2} width="200" height="200" alt="" />
<img src={product.Pic3} width="200" height="200" alt="" />
</Grid>
</Grid>
</Grid>
);
}
export default Review;

ProductReducer.js

// Imports
// Actions
import {
ADD_PRODUCT_DETAILS,
ADD_PRODUCT_DISPLAY,
DELETE_PRODUCT,
} from "../Actions/ProductTypes";
// Defining Initial State
var initialState = {
Brand: null,
Name: "",
Price: 0.0,
Category: "",
Ships_to: [],
Pic1: null,
Pic2: null,
Pic3: null,
};
const productReducer = (state = initialState, action) => {
switch (action["type"]) {
case ADD_PRODUCT_DETAILS:
state = initialState;
state["Brand"] = action["Brand"];
state["Name"] = action["Name"];
state["Price"] = action["Price"];
state["Category"] = action["Category"];
state["Ships_to"] = action["Ships_to"];
return state;
case ADD_PRODUCT_DISPLAY:
state["Pic1"] = action["Pic1"];
state["Pic2"] = action["Pic2"];
state["Pic3"] = action["Pic3"];
return state;
case DELETE_PRODUCT:
state = initialState;
return state;
default:
return state;
}
};
export default productReducer;

index.js

...
//  Imports
// Redux Modules
import { combineReducers } from "redux";
// Reducers
import authReducer from "./AuthReducer";
import userReducer from "./UserReducer";
import productReducer from "./ProductReducer";
//  Defining RootReducer
const rootReducer = combineReducers({
authReducer,
userReducer,
productReducer,
});
// Defining LocalStorage
function saveToLocalStorage(state) {
try {
const serialisedState = JSON.stringify(state);
localStorage.setItem("persistantState", serialisedState);
} catch (e) {
console.warn(e);
}
}
function loadFromLocalStorage() {
try {
const serialisedState = localStorage.getItem("persistantState");
if (serialisedState === null) return undefined;
return JSON.parse(serialisedState);
} catch (e) {
console.warn(e);
return undefined;
}
}
//  Defining Redux Store
export const store = createStore(
rootReducer,
loadFromLocalStorage(),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
// Persisting state using { LocalStorage }
store.subscribe(() => saveToLocalStorage(store.getState()));

有人能告诉我如何在浏览器上显示图像吗？

编辑这是Display Form.js

import React, { Component, useState } from "react";
import axios from "axios";
import { useSelector, useDispatch } from "react-redux";
import { ADD_PRODUCT_DISPLAY } from "../../../Actions/ProductTypes";
// CSS
import { makeStyles } from "@material-ui/core/styles";
// Material UI
// Layout
import Grid from "@material-ui/core/Grid";
// Text
import Typography from "@material-ui/core/Typography";
// Input & Icons
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles((theme) => ({
root: {
"& > *": {
margin: theme.spacing(1),
},
},
input: {
margin: theme.spacing(0),
},
}));
function DisplayForm() {
const classes = useStyles();
const dispatch = useDispatch();
const product = useSelector((state) => state.productReducer);
const [file1, setFile1] = useState("");
const [file2, setFile2] = useState("");
const [file3, setFile3] = useState("");
const handleFile1Change = (e) => {
setFile1(e.target.files[0]);
};
const handleFile2Change = (e) => {
setFile2(e.target.files[0]);
};
const handleFile3Change = (e) => {
setFile3(e.target.files[0]);
};
const handleSubmit = () => {
const config = { headers: { "Content-Type": "multipart/form-data" } };
const URL = "http://127.0.0.1:8000/product-create/";
let formData = new FormData();
dispatch({
type: ADD_PRODUCT_DISPLAY,
Pic1: file1,
Pic2: file2,
Pic3: file3,
});
};
return (
<Grid>
<Typography variant="h6" gutterBottom>
Product Display
</Typography>
<Grid
container
spacing={3}
direction="column"
justify="center"
alignItems="flex-start"
>
<Grid item xs={12}>
<label>
<input
accept="image/*"
className={classes.input}
id="post-image"
onChange={handleFile1Change}
name="image"
type="file"
/>
</label>
<Typography variant="p" component="text" gutterBottom>
Please select a picture to display your product
</Typography>
</Grid>
<Grid item xs={12}>
<input
accept="image/*"
className={classes.input}
id="post-image"
onChange={handleFile2Change}
name="image"
type="file"
/>
<Typography variant="p" component="text" gutterBottom>
Please select another picture to display your product
</Typography>
</Grid>
<Grid item xs={12}>
<input
accept="image/*"
className={classes.input}
id="post-image"
onChange={handleFile3Change}
name="image"
type="file"
/>
<Typography variant="p" component="text" gutterBottom>
Please select the final picture to display your product
</Typography>
</Grid>
<Grid item xs={12}>
<Button onClick={handleSubmit}>Submit Product Display</Button>
</Grid>
</Grid>
</Grid>
);
}
export default DisplayForm;

Answer 1

您在这里修改当前状态，这被认为是一个错误，在Redux减速器中是不允许的。您只是在修改状态，这意味着React永远不会检测到发生了更改，也永远不会用新状态重新渲染。

你不能用老风格做CCD_ 3；香草"；Redux。如果你使用的是现代Redux风格的减速器，你可以这样做，但不是像你在这里使用的老式Redux。(要进入现代Redux，请遵循官方的Redux教程(

这里，你的ADD_PRODUCT_DETAILS需要看起来像

case ADD_PRODUCT_DETAILS:
return {
...initialState,
Brand: action.Brand,
Name: action.Name,
Price: action.Price,
Category: action.Category,
Ships_to: action.Ships_to
}

和ADD_PRODUCT_DISPLAY:

case ADD_PRODUCT_DISPLAY:
return {
...state,
Pic1: action.Pic1,
Pic2: action.Pic2,
Pic3: action.Pic3,
}