Question

我只是想从api获取数据并在前端显示它。我正在使用Redux使用 ACTIONS和REDUCERS 来调用api。在Reducers中，我将初始状态视为空数组。成功调用API后，我正在更新存储状态。下面是实用的内容，可以帮助您轻松理解概念。

store.js

import { createStore } from 'redux';
import reducer from './reducers/reducer';

let store = createStore(reducer)
export default store

actions.js

import { 
 FETCH_IMAGES_SUCCESS
} from './actionTypes'

export function fetchImages() {
  return dispatch => {
   return fetch("https://api.com/data")
   .then(res => res.json())
   .then(json => {
     dispatch(fetchImagesSuccess(json.posts));
    return json.posts;
   })
  };
}

export const fetchImagesSuccess = images => ({
  type: FETCH_IMAGES_SUCCESS,
  payload: { images }
});

reducer.js

import {
 FETCH_IMAGES_SUCCESS
} from '../actions/actionTypes'

const initialState = {
 images:[] 
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_IMAGES_SUCCESS:
     return {...state,images:action.payload.images}
    default:
     return state
  }
}

export default reducer;

现在，请告诉我调用Redux动作和从API获取数据。我正在使用React来显示数据。

谢谢。

Answer 1

在React redux使用情况页面中，您可以使用诸如mapStateToProps之类的函数并进行连接

Answer 2

您需要使用Redux-Saga或Redux-Thunk之类的中间件来与操作和使用Redux维护的全局存储进行对话。您可以按照以下教程进行操作：https://redux.js.org/basics/exampletodolist

如果要使用Redux-Thunk，则需要像这样修改商店分配：

const store = createStore(rootReducer, applyMiddleware(thunk));

现在，为您拥有的所有父级组件提供一个容器。

import { connect  } from 'react-redux';
import App from '../components/App';


export function mapStateToProps(appState) {

  return {
  /* this is where you get your store data through the reducer returned 
  state */
  };
}

export function mapDispatchToProps(dispatch) {
  return {
   // make all your action dispatches here
// for ex: getData(payload) => dispatch({type: GETDATA, payload: payload})

  };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 3

正如Mustafa所说，您需要使用mapStateToProps。让我解释一下自己。

您刚刚完成的只是主存储的配置（redux中只有一个）。现在您需要在组件中使用它，但是如何使用？创建组件时，store的内容将在props的帮助下作为Containers传递。

容器是将商店与react组件链接的方式。

表示，您需要安装redux和react-redux。在上面的代码中，您已成功为带有redux库的reducer配置了商店。现在，您需要react-redux来创建容器（包装您的react组件）。

以下是如何将所有内容放在一起的示例： https://codepen.io/anon/pen/RqKyQZ?editors=1010

Answer 4

您需要使用类似于以下代码的mapStateToProps。假设您的reducer称为test，它是状态的一部分。

const mapStateToProps = (state, props) =>
({
    router: props.router,
    test: state.test
});

然后test将用作React类的属性。显然，您需要为React添加相应的导入。

如何在React中使用Redux

4 个答案: