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.将数据分发到localStorage 2.将数据分发到Redux开发工具

我的问题：我想从商店读取数据到组件，但是当我console.log（store.getState（）。water）;状态为空。我真的需要你们的帮助。预先感谢

Answer 1

js的存储可以通过这种方式配置 const store = createStore(rootReducer,initialState, applyMiddleware(thunk)); applyMiddleware只是一个增强器，使您可以通过化简器将操作调度到商店。 console.log（action.playload），然后确保在化简器中将实际数据等同于water属性。我猜测 case GET_WATER: return { ...state, water: action.water, loading: false, }; 应该起作用，我怀疑这是错误的来源，不要忘记将状态映射到道具以访问数据。

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

1 个答案: