無法從 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 dev tools screenshot localStorage screenshot這段代碼實現了什么 1. Dispatch data to localStorage 2. Dispatch data to Redux dev tools

我的問題：我想從商店讀取數據到組件，但是當我 console.log(store.getState().water); 狀態為空。 我真的需要你們的幫助。 提前致謝

Answer 1

js 所在的商店可以這樣配置const store = createStore(rootReducer,initialState, applyMiddleware(thunk)); applyMiddleware 只是一個增強器，使您能夠通過 reducer 將操作發送到您的商店。 console.log( action.playload )，然后確保在減速器中將實際數據等同於水屬性。 我懷疑case GET_WATER: return { ...state, water: action.water, loading: false, }; 應該可以工作，我懷疑這是錯誤的來源，不要忘記將狀態映射到道具以訪問數據。