本文将为您提供关于使用RestAPI进行React+Redux？的详细介绍，我们还将为您解释restapi教程的相关知识，同时，我们还将为您提供关于api没有使用react-redux达到目标、Rea

本文将为您提供关于使用Rest API进行React + Redux？的详细介绍，我们还将为您解释rest api 教程的相关知识，同时，我们还将为您提供关于api没有使用react-redux达到目标、React native Listview 使用react-redux时候更新不起效果、React Redux教程：如何使用Redux管理前端状态、React-Redux 和 React Context API 可以在同一个项目中使用吗？的实用信息。

• 使用Rest API进行React + Redux？（rest api 教程）
• api没有使用react-redux达到目标
• React native Listview 使用react-redux时候更新不起效果
• React Redux教程：如何使用Redux管理前端状态
• React-Redux 和 React Context API 可以在同一个项目中使用吗？

使用Rest API进行React + Redux？（rest api 教程）

我在节点中构建了一个简单的CRUD应用程序，并已在Express中完成了其余API的创建。我现在正在寻求添加前端功能，并希望将react +
redux用作学习练习。但是，所有与此相关的教程似乎都使用Redux直接访问数据，而不是与内部API接口。

我的问题是，使用redux构建SPA的正确方法是吗？我的印象是最好将前端与后端分开，这样我就可以例如构建一个iPhone应用程序，而不必重建后端。

提前致谢。

答案1

Redux本身与API通信无关，它是用于客户端状态管理的库。您可以使用任何方法来触发和处理请求，最常见的方法是使用自定义的api连接中间件，从动作创建者返回触发请求的函数，并将其与rx-
bridges或sagasthunk-middleware等替代方法一起使用或与之结合使用。

api没有使用react-redux达到目标

您创建的thunk fetchBlog应该返回一个异步函数（也就是一个返回诺言的函数）

您刚刚错过了return

function fetchBlog(){
   return function(dispatch){

     dispatch(someAction());

     return axios.get()
            .then(() => {
                dispatch(setAction());
            })
            .catch(error => {
                dispatch(onErrorAction());
            });
   }
}

或者您可以使用异步/等待功能

function fetchBlog(){
    return async (dispatch) => {
       try{
         dispatch(someAction());

         const res = await axios.get();

         dispatch(setAction({ res }));

       }catch(error){

         dispatch(onErrorAction());
       }
    }
}

添加到props函数的分发中，您不需要通过dispatch调用它，因为thunk-middleware将动作理解为函数并可以执行它，因此您只需要引用{{ 1}}本身，您就准备好了

thunk

或者更好，只需使用一个对象

const mapDispatchToProps = dispatch => {
 return {
    fetchBlog: fetchBlog
 }
}

或者您可以

const mapDispatchToProps = {
    fetchBlog: fetchBlog
}

更简单

React native Listview 使用react-redux时候更新不起效果

http://reactnative.cn/docs/0.31/listviewdatasource.html

我们使用concat方法来修改this._data以创建新数组，注意不能使用push方法拼接数组

// 入口函数，需要先存储历史数据，然后再进行展示

export function createHistoryData(rowData) {
    return (dispatch) => {
        let dao = new NetInfoDataDAO();

        historyList.unshift(rowData);
        dao.save(historyList).then((msg) => { dispatch(historyDataSuccess(historyList)); Toast.show('测试成功',{ position: px2dp(-80) }); },(msg) => { historyList.shift(); //save Failed,pop the data from the list Toast.show('测试失败',{ position: px2dp(-80) }); }); }; }

// 入口函数，需要先存储历史数据，然后再进行展示

export function createHistoryData(rowData) {
    return (dispatch) => {
        let dao = new NetInfoDataDAO();
        historyList = [rowData].concat(historyList)
        // historyList.unshift(rowData);
        dao.save(historyList).then((msg) => { dispatch(historyDataSuccess(historyList)); Toast.show('测试成功',{ position: px2dp(-80) }); }); }; }

React Redux教程：如何使用Redux管理前端状态

React Redux教程：如何使用Redux管理前端状态
React是一个非常受欢迎的JavaScript库，用于构建用户界面。而Redux是一种用于管理应用程序状态的JavaScript库。它们结合起来可以帮助我们更好地管理前端状态。本文将介绍如何使用Redux在React应用中管理状态，并提供具体的代码示例。

一、安装和设置Redux

首先，我们需要安装Redux和React Redux。在项目目录下运行以下命令来安装依赖项：

npm install redux react-redux

安装完成后，我们需要设置Redux的store。在项目的根目录下，创建一个store.js文件，并添加以下代码：

立即学习“前端免费学习笔记（深入）”；

import { createStore } from ''redux'';

// 初始状态
const initialState = { count: 0 };

// Reducer函数
function reducer(state = initialState, action) {
  switch (action.type) {
    case ''INCREMENT'':
      return { ...state, count: state.count + 1 };
    case ''DECREMENT'':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

// 创建store
const store = createStore(reducer);

export default store;

这段代码创建了一个初始状态为{ count: 0 }的store，同时定义了一个reducer函数来处理状态的变化。当我们的应用需要增加计数器时，可以发送一个{ type: ''INCREMENT'' }的action，减少计数器时发送{ type: ''DECREMENT'' }的action。

二、将Redux集成到React应用中

接下来，在我们的React应用中将Redux集成进来。在根目录下的index.js文件中添加以下代码：

import React from ''react'';
import ReactDOM from ''react-dom'';
import { Provider } from ''react-redux'';
import store from ''./store'';
import App from ''./App'';

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

这段代码使用了React Redux提供的Provider组件，将Redux的store传递给了应用的根组件App，这样一来，我们就可以在任何需要读取或修改状态的组件中使用Redux。

三、在组件中使用Redux

现在，我们可以在组件中使用Redux来管理状态了。接下来，我们将创建一个Counter组件，用于展示计数器状态，并提供按钮来增加和减少计数器的值。在项目根目录下创建Counter.js文件，并添加以下代码：

import React from ''react'';
import { connect } from ''react-redux'';

class Counter extends React.Component {
  increment = () => {
    this.props.dispatch({ type: ''INCREMENT'' });
  };

  decrement = () => {
    this.props.dispatch({ type: ''DECREMENT'' });
  };

  render() {
    return (
      <div>
        <h1>计数器：{this.props.count}</h1>
        <button onClick={this.increment}>增加</button>
        <button onClick={this.decrement}>减少</button>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { count: state.count };
}

export default connect(mapStateToProps)(Counter);

这段代码展示了如何将Redux状态映射到组件的属性，以及如何在组件中派发action。通过调用connect函数并传递mapStateToProps函数，我们可以将Redux store中的{ count: 0 }映射到组件的this.props.count属性中。这样一来，当我们的应用状态发生变化时，组件将会自动更新。

最后，在应用的根组件App.js中添加Counter组件：

import React from ''react'';
import Counter from ''./Counter'';

class App extends React.Component {
  render() {
    return <Counter />;
  }
}

export default App;

现在，我们的React Redux应用已经配置完毕。当我们打开应用时，会看到一个计数器组件，并且我们可以通过点击按钮来增加或减少计数器的值。

总结：

本文介绍了如何使用Redux在React应用中管理前端状态，并提供了具体的代码示例。通过安装和设置Redux，然后将Redux集成到React应用中，我们可以方便地管理和更新应用的状态。希望本文对你理解React Redux的使用有所帮助！

以上就是React Redux教程：如何使用Redux管理前端状态的详细内容，更多请关注php中文网其它相关文章！

React-Redux 和 React Context API 可以在同一个项目中使用吗？

这真的取决于用例。

如果您正在寻找自上而下的 props 向下传递结构，其中相同的数据用于多个深度的组件（例如主题、身份验证等），那么 Context API 就是方法。

如果您正在寻找可以动态管理数据并不断更新数据的大型存储，那么 Redux 就是您的选择。

如果两者都需要，我认为这样做完全没问题。

它们不是很重，（我猜是 Redux ......一点点？）而且它们确实有不同的用途。

今天关于使用Rest API进行React + Redux？和rest api 教程的讲解已经结束，谢谢您的阅读，如果想了解更多关于api没有使用react-redux达到目标、React native Listview 使用react-redux时候更新不起效果、React Redux教程：如何使用Redux管理前端状态、React-Redux 和 React Context API 可以在同一个项目中使用吗？的相关知识，请在本站搜索。