在页面加载时存储到Redux

Question

我对React和Redux框架还是很陌生的。我想做的是从componentDidMount的API调用中读取适当的zipCode。现在，我必须将其保存到redux存储。

我真的对reducer和action等感到困惑。而且不确定如何以及在何处配置它们。

不胜感激。

Answer 1

如我所见，Redux乍一看似乎令人困惑。但是像一切一样，您将很快理解它，特别是如果您练习自己制作redux应用程序（在该社区的支持下）并通过反复试验而成功。

关于Redux，您必须了解以下内容（我不会详细介绍，请保持其简单和基本，并将其与您的问题联系起来）

1。动作：顾名思义，这些动作是视图/组件触发的动作。例如。当您请求提取邮政编码时，该邮政编码将被分派到操作中。

componentDidMount(){
    this.props.fetchZipCode(85001);
}

action.js

export const fetchZipCode= (zip) => ({
  type: 'FETCH_ZIPCODE',
  zip,
});

2。减速器：：它们处理动作请求。如Redux docs 中所述，“ reducer是一个纯函数，它接受上一个状态和一个动作，然后返回下一个状态”。

reducer.js

const ZipcodeInfo = (state = 0, action) => {
  switch (action.type) {
    case 'REQUEST_ZIPCODE':
      return {
        ...state
      };
    case 'RECEIVE_ZIPCODE':
      return {
        ...state
        zip: action.data.zipcode
      };
    case 'RECEIVE_ZIPCODE_FAILED':
      return {
        ...state
      }
    default:
      return state;
  }
};

3。商店：这就是将所有东西汇集在一起​​的原因。它保持应用程序状态，允许访问商店。

index.js（注意：这是应用程序的根文件，因此所有状态都可以从商店传递到应用程序中的所有组件）

import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux'
import ZipcodeInfo from './reducers'

const store = createStore(ZipcodeInfo)

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, document.getElementById('root'));
registerServiceWorker();

4。中间件：现在不需要中间件，但是，如果要进行异步调用，则需要使用中间件将信息传递给API等...用于Redux的中间件很多。

Redux-saga中间件示例

import {call, put, takeEvery, fork} from 'redux-saga/effects';
import * as service from '../Services/api';
import * as actions from '../actions/zipcode';

//The worker: will handle the action and terminate
function* fetchZipcode(action){
  try{
    yield put(actions.requestZipcode());
    const [zipcode] = yield [call(service.getZipcodeAPI, action.zip)];
    yield put(actions.receiveZipcode(zipcode));
  } catch(e){
    yield put(actions.receiveZipcodeFailed(e));
  }
}

//The watcher: will watch for dispatched actions and fork a worker on every action
function* watchfetchZipcode(){
  yield takeEvery('FETCH_ZIPCODE', fetchZipcode);
}

export default function* zipcodeSaga(){
  yield fork(watchfetchZipcode);
}

我个人更喜欢Redux-Saga作为中间件，但由于它使用了es6的生成器和更多未知的术语，因此可能会造成混淆。

Answer 2

观看以下教程。这是一个简单的示例。

https://www.youtube.com/watch?v=OSSpVLpuVWA