Question

我正在尝试学习反应，为此，我试图创建一个示例待办事项应用程序。我有一个python flask后端，该服务器作为REST服务器，并作为Web服务器进行响应。

所有作品都可以找到待办事项，也可以删除特定待办事项。但是现在我已经开始学习Redux，这似乎真的很令人困惑。

我不确定如何拨打我的休息服务器。只是返回承诺，而不是如何获取数据，而不是承诺。

store.js

import axios from 'axios'
import { createStore } from 'redux'

export const ADD_TODO = 'ADD_TODO'

let nextTodoId = 0
export const addTodo = text => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
})

export const listTodo = todos => ({
  type: 'LIST_TODO',
  todos
})

const add_todo = (id, text) => {
  return axios.post("http://localhost:5001/todos", {id:id, data:text})
    .then(Response=>{
           store.dispatch(addTodo(Response.data));
    })
}

const fetch_data = () => {
  return axios.get("http://localhost:5001/todos")
        .then(Response=>{
          store.dispatch(listTodo(Response.data))
        })
}
const initialState ={
    todos: {},
    new_todo: ''
}

function todoApp(state = initialState, action) {
    console.log("reducer called...")
    switch (action.type) {
       case ADD_TODO:
        return Object.assign({}, state, {
          new_todo: action.text
        })
      default:
        return state
    }
}

const store = createStore(todoApp)
export default store

app.js

import React, {Component} from 'react' 
import {connect} from 'react-redux'
class App extends Component{
 render(){
  return(        
      <div>
        <button onClick={this.props.addTodo('testing')}>fetch_Data</button>
      </div>

   );
 }
}

export default connect() (App)

index.js

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

Answer 1

首先，您应该导出已创建的动作，然后使用连接HOC将其导入并在组件中使用。

您可以调度'fetch_data'操作以获取组件中的数据。另外，您可以分派“ addTodo”操作以在列表中添加新的待办事项。

export const ADD_TODO = 'ADD_TODO';
export const GET_TODO = 'GET_TODO';

export const fetch_data = () => {
return (dispatch) => axios.get("http://localhost:5001/todos")
    .then(response => {
         dispatch({type: GET_TODO, todos: response.data});
    })
}

export const addTodo = text => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text: text
});

使用诸如ADD_TODO，GET_TODO之类的动作常量来保存或更新化简器中的redux状态

const todoApp = (state = initialState, action) => {
console.log("reducer called...")
switch (action.type) {
   case ADD_TODO:
      const todos = {...state.todos};
      todos[action.id] = action.text;
      return Object.assign({}, state, {
        todos: todos
      });
   case GET_TODO:
      return Object.assign({}, state, {
        todos: action.todos
      });
   default:
      return state
   }
}

导入动作，然后调用您在“ mapDispatchToProps”中添加的函数以分派动作。

import React, {Component} from 'react'
import {connect} from 'react-redux';
import { addTodo, fetch_data } from "../store";
class App extends Component{
    render(){
        return(
            <div>
                <button onClick={this.props.addTodo(todoId, 'testing')}>fetch_Data</button>
            </div>

        );
    }
}

const mapStateToProps = (state) => ({
    todos: state.todoApp.todos
});

const mapDispatchToProps = (dispatch) => ({
    addTodo: (id, text) => dispatch(addTodo(id, text)),
    fetch_data: () => dispatch(fetch_data())
});

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

Answer 2

redux基于动作和reducer，基本上reducers是纯函数，这意味着没有副作用，例如api调用，我建议您阅读更多有关redux以及如何将redux与redux-chunk一起用于进行api调用的信息< / p>

Answer 3

您可以像这样进行这项工作。收到回复后，您需要调度操作。

const fetch_data = () => {
  return axios.get("http://localhost:5001/todos")
    .then(Response=>{
           store.dispatch(addTodo(Response.data));
    })
}

export const addTodo = text => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text: text
})

用axios api调用来响应redux

3 个答案: