无法从Redux存储中获取数据并在UI组件中更新

Question

我是Redux的新手，正在构建一个跟踪器应用程序，但我已经被解雇好几天了。如果我能得到你的帮助，我将不胜感激。感谢

store.js

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const initialState = { };
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
compose(applyMiddleware(...middleware), // store enhancer func
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()),
);
export default store;

waterReducer.js

import { GET_WATER,  ADD_WATER } from '../actions/types';
const initialState = {
water: [],
loading: false,
};
export default function (state = initialState, action) {                                           
switch (action.type) {
case GET_WATER:
return {
...state,
water: action.payload,
loading: false,
};
case ADD_WATER:
return {
...state,
water: [action.payload, ...state.water || {}],
loading: false,
};
default:
return state;
}
}

addWaterActions.js

const defaultURL = 'http://localhost:3000';
const myLibrary = JSON.parse(localStorage.getItem('myLibrary')) || []
const addWaters = waterData => async dispatch => {
const apiConfig = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
};
try {
const water = await axios.post(`${defaultURL}/waters`, waterData, apiConfig);
myLibrary.push(water.data);
localStorage.setItem('myLibrary', JSON.stringify(myLibrary));
dispatch({
type: ADD_WATER,
payload: water.data,
});
return water.data;
} catch(error) {
dispatch({
type: WATERS_ERRORS,
payload: error
});
}
};

addWaterComponent.js

import { addWaters } from '../../redux/actions/waterActions';
const AddWater = ({ addWaters }) => {
const [formData, setFormData] = useState({
amount: '',
total: '',
});
const {
amount, total,
} = formData;
const onChange = e => setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = e => {
e.preventDefault();
addWaters({
id: uuidv1(),
amount,
total,
});
};
return (
<>
<AddWrap>
<TrackWater>
Add Water
</TrackWater>
<CenterW>

<FormWrap onSubmit={onSubmit}>
<AmountInp
type="number"
name="amount"
value={amount}
onChange={onChange}
placeholder="Amount"
required
/>
<TotalInp
type="number"
name="total"
placeholder="Water Target"
value={total}
onChange={onChange}
required
/>
<SubmitData type="submit" onSubmit={onSubmit}>
Add Water to Data
</SubmitData>
</FormWrap>
</CenterW>
</AddWrap>
<Footer />
</>
);
};
AddWater.propTypes = {
addWaters: PropTypes.func.isRequired,
water: PropTypes.array.isRequired,
};
const mapStateToProps = state => ({
water: state.water.water,
});
export default connect(mapStateToProps, { addWaters })(AddWater);

Redux开发工具屏幕截图localStorage屏幕截图这个代码实现了什么1。将数据发送到本地存储2.将数据发送到Redux开发工具

我的问题是：我想将数据从存储读取到组件，但当我控制台.log(store.getState((.water(；该状态为空。我真的需要你们的帮助。提前感谢

Answer 1

js所在的存储区可以这样配置const store = createStore(rootReducer,initialState, applyMiddleware(thunk));applyMiddleware只是一个增强程序，使您能够通过reducer将操作发送到您的商店。console.log(action.playload(，然后确保在reducer中将实际数据等同于水属性。我怀疑case GET_WATER: return { ...state, water: action.water, loading: false, };如果工作正常，我怀疑这就是错误的来源，不要忘记将状态映射到访问数据的道具。