Javascript 将函数从纯react转换为redux react

在pure react中，我编写了一个在

componentDidMount（）

中调用的函数：

我正试图将其重写为redux，但结果很差。首先，它发出一个请求

/api/v1/beta/${userId}

，将答案写入变量

check

<代码>检查传递到下一个

，然后

。在下一个

中，然后执行请求“/api/v1//tasks”，有人能帮我吗？我想问一些建议。这有点复杂吗

到目前为止，我已经成功地创建了如下内容：

商店

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

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

export default store;

行动

export const RUNNING_TIMER = 'RUNNING_TIMER';
export const GET_TASKS = 'GET_TASKS';
export const FETCH_FAILURE = 'FETCH_FAILURE';

export const runningTimer = (userId, query, statusTask, pageNumber) => dispatch => {
  console.log(userId);
  axios({
    url: `/api/v1/beta/${userId}`,
    method: 'GET'
  })
    .then(({ data }) => {
      dispatch({
        type: RUNNING_TIMER,
        payload: data
      });
    })
    .catch(error => {
      console.log(error);

      dispatch({ type: FETCH_FAILURE });
    })
    .then(() => {
      const params = {
        sort: 'name'
      };

      axios({
        url: '/api/v1//tasks',
        method: 'GET',
        params
      })
        .then(({ data }) => {
            dispatch({
                type: GET_TASKS,
                payload: data
            });
        })
        .catch(error => {
            console.log(error);
        });
    });
};

减速器

import { RUNNING_TIMER, GET_TASKS } from '../actions';

const isRunningTimer = (state = {}, action) => {
  const { type, payload } = action;
  switch (type) {
    case RUNNING_TIMER:
      return {
        checkRunningTimer: payload,
        checkRunningTimerId: payload && payload.id ? payload.id : null
      };
      break;
      case GET_TASKS:
      return {
        tasks: payload,
        lengthArrayTasks: parseInt(action.headers['x-pagination-total-count'])
      };
    default:
      return state;
  }
};

const rootReducer = combineReducers({ isRunningTimer });

export default rootReducer;

应用程序

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  componentDidMount() {
    this.props.runningTimer();
  }

  render() {
    return (
      <div>

      </div>
    );
  }
}

const mapStateToProps = state => {
  const { isRunningTimer } = state;

  return {
    isRunningTimer
  };
};

const mapDispatchToProps = dispatch => ({
  runningTimer: (userId, query, statusTask, pageNumber) => dispatch(runningTimer()),
});

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

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“反应”
};
}
componentDidMount（）{
this.props.runningTimer（）；
}
render（）{
返回(
);
}
}
常量mapStateToProps=状态=>{
const{isRunningTimer}=状态；
返回{
isRunningTimer
};
};
const mapDispatchToProps=调度=>({
runningTimer：（userId，query，statusTask，pageNumber）=>dispatch（runningTimer（）），
});
导出默认连接(
MapStateTops，
mapDispatchToProps
)（App）；
编号1考虑您的状态设计。
我认为在给定的时间点考虑状态对象是什么样的是有用的。
下面是我的一个应用程序中使用的initialState示例

const initialState = {
        grocers: null,
        coords: {
            latitude: 37.785,
            longitude: -122.406
        }

    };

这是在createStore中注入的

分解应用程序状态对象/属性，也有助于简化操作

二号
考虑分解你的行为

我的想法是，先在第二个点上，然后在第二个点上，将动作代码解耦。（考虑将结果保存在user:object中的某个位置）

这是指实体设计原则中的S。单一责任原则


三号
如果“getUser”信息获取失败，请考虑这一点

将进程/响应分离将允许更干净地调试应用程序。例如，用户api失败或GetTaskAPI失败，等等


更多关于redux的资源。
退房。react和redux的绝佳样板。他们还使用了
redux传奇
和
redux钩子
 扩展@Cullen之前的回答，我就是这么做的：

由于您已经有了一个操作来获取待办事项，只需让
runningTimer
的操作创建者做一件而且只有一件事——对
/API/v1/beta/
进行API调用并分派相应的操作
export const runningTimer=(
用户ID，
查询
状态任务，
页码
)=>调度=>{
返回轴({
url:`/api/v1/beta/${userId}`，
方法：“获取”
})
。然后（{data}）=>{
派遣({
类型：运行计时器，
有效载荷：数据
});
})
.catch（错误=>{
console.log（错误）；
分派（{type:FETCH_FAILURE}）；
});
};

更新应用程序组件的道具以读取存储数据
。。。
常量mapStateToProps=状态=>{
const{isRunningTimer，todos，todo}=状态；
返回{
待办事项，
待办事项，
在运行时间，
};
};
const mapDispatchToProps=调度=>({
getTodos:（）=>dispatch（getTodos（）），
getTodo:id=>dispatch（getTodo（id）），
runningTimer：（userId，query，statusTask，pageNumber）=>dispatch（runningTimer（userId）），
});
...

更新
componentDidMount
的实现以分派
isRunningTimer
-
componentDidMount（）{
...
//用户ID为1的调用
这个.props.runningTimer（1）。然后（（）=>{
console.log（this.props）；
//GetTask的附加参数
常量参数={
排序：“名称”
};
//另一个对已排序名称的gettoos的调用
this.props.gettoos（params）；
});
...

注意：您需要更新
getTodos
操作，以便在可选的
params
参数中执行操作（如果未传递，则初始化为空对象）

希望这对你有帮助

这里提供了此问题的实时沙盒-
您可能会发现此答案很有用。它还有一个沙盒可以玩。@pritam我们可以在聊天中交谈吗？
runningTimer中的runningTimer是什么？（userId，query，statusTask，pageNumber）=>dispatch（runningTimer（）），
runningTimer（）
part？@HMR应该是
const-mapDispatchToProps=dispatch=>（{runningTimer:（userId，query，statusTask，pageNumber）=>dispatch（runningTimer（userId，query，statusTask，pageNumber）））
@HMR runningTimer它是action在pure Rect中查看我的组件。我无法解耦
。然后你可以在第二时间分离
。然后，我插入了一个示例来包装和“关闭”该操作。使用你自己的想法命名和分离这些操作。看看我在pure React中的函数很复杂。将你的函数与mu func进行比较纯粹的反应。在你的功能中没有几个元素。好吧，请不要期待一个完整的答案。我们可以给你一些关于如何做一件事的见解，拿一支笔和一张纸，简化你的工作流程。你会更好地理解你应该如何添加那些缺失的部分。如果你想聊天，请告诉我你将如何以及何时添加蚂蚁。
const initialState = {
        grocers: null,
        coords: {
            latitude: 37.785,
            longitude: -122.406
        }

    };

        .then(response => {
          const data = response.data.user;
          setUsers(data);})
        .catch(error => {
            console.log('There has been a problem with your fetch operation: ' + error.message);
        })

    function setUsers(data){
        dispatch({
            type: FETCH_USERS,
            payload: data
        });
    }