Javascript 如何在react native中使用thunk？

我正在学习redux

我只是想模拟从服务器获取数据，所以我使用

setTimeout（）

来处理它

但它有一个错误

错误：操作必须是普通对象。使用自定义中间件进行异步 行动

虽然我安装了

redux-thunk

但它并不能解决这个问题

这是密码

/actions/userActions.js

const setName = name => {
  return dispatch => {
    setTimeout(() => {
      dispatch({
        type: 'SET_NAME',
        payload: name,
      });
    }, 2000);
  };
};

const setAge = age => {
  return {
    type: 'SET_AGE',
    payload: age,
  };
};

export {setName, setAge};

const userReducer = (
  state = {
    name: 'Max',
    age: 27,
  },
  action,
) => {
  switch (action.type) {
    case 'SET_NAME':
      state = {
        ...state,
        name: action.payload,
      };
      break;
    case 'SET_AGE':
      state = {
        ...state,
        age: action.payload,
      };
      break;
  }
  return state;
};

export default userReducer;

import {applyMiddleware, combineReducers, compose, createStore} from 'redux';
import thunk from 'redux-thunk';
import mathReducer from '../reducers/mathReducer';
import userReducer from '../reducers/userReducer';

const store = createStore(
  combineReducers(
    {math: mathReducer, user: userReducer},
    // applyMiddleware(thunk) not work :]
    compose(applyMiddleware(thunk)), //same :]
  ),
);

export default store;

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Main changeUsername={() => this.props.setName('Oliver')} />
        <User username={this.props.user.name} />
      </View>
    );
  }
}



const mapStateToProps = state => {
  return {
    user: state.user, //user is a key == userReducer
    math: state.math,
  };
};

const mapDispatchToProps = dispatch => {
  // to excute the actions we want to invok
  return {
    setName: name => {
      dispatch(setName(name));
    },
  };
};

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

/reducers/userReducers.js

const setName = name => {
  return dispatch => {
    setTimeout(() => {
      dispatch({
        type: 'SET_NAME',
        payload: name,
      });
    }, 2000);
  };
};

const setAge = age => {
  return {
    type: 'SET_AGE',
    payload: age,
  };
};

export {setName, setAge};

const userReducer = (
  state = {
    name: 'Max',
    age: 27,
  },
  action,
) => {
  switch (action.type) {
    case 'SET_NAME':
      state = {
        ...state,
        name: action.payload,
      };
      break;
    case 'SET_AGE':
      state = {
        ...state,
        age: action.payload,
      };
      break;
  }
  return state;
};

export default userReducer;

import {applyMiddleware, combineReducers, compose, createStore} from 'redux';
import thunk from 'redux-thunk';
import mathReducer from '../reducers/mathReducer';
import userReducer from '../reducers/userReducer';

const store = createStore(
  combineReducers(
    {math: mathReducer, user: userReducer},
    // applyMiddleware(thunk) not work :]
    compose(applyMiddleware(thunk)), //same :]
  ),
);

export default store;

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Main changeUsername={() => this.props.setName('Oliver')} />
        <User username={this.props.user.name} />
      </View>
    );
  }
}



const mapStateToProps = state => {
  return {
    user: state.user, //user is a key == userReducer
    math: state.math,
  };
};

const mapDispatchToProps = dispatch => {
  // to excute the actions we want to invok
  return {
    setName: name => {
      dispatch(setName(name));
    },
  };
};

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

/store.js

const setName = name => {
  return dispatch => {
    setTimeout(() => {
      dispatch({
        type: 'SET_NAME',
        payload: name,
      });
    }, 2000);
  };
};

const setAge = age => {
  return {
    type: 'SET_AGE',
    payload: age,
  };
};

export {setName, setAge};

const userReducer = (
  state = {
    name: 'Max',
    age: 27,
  },
  action,
) => {
  switch (action.type) {
    case 'SET_NAME':
      state = {
        ...state,
        name: action.payload,
      };
      break;
    case 'SET_AGE':
      state = {
        ...state,
        age: action.payload,
      };
      break;
  }
  return state;
};

export default userReducer;

import {applyMiddleware, combineReducers, compose, createStore} from 'redux';
import thunk from 'redux-thunk';
import mathReducer from '../reducers/mathReducer';
import userReducer from '../reducers/userReducer';

const store = createStore(
  combineReducers(
    {math: mathReducer, user: userReducer},
    // applyMiddleware(thunk) not work :]
    compose(applyMiddleware(thunk)), //same :]
  ),
);

export default store;

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Main changeUsername={() => this.props.setName('Oliver')} />
        <User username={this.props.user.name} />
      </View>
    );
  }
}



const mapStateToProps = state => {
  return {
    user: state.user, //user is a key == userReducer
    math: state.math,
  };
};

const mapDispatchToProps = dispatch => {
  // to excute the actions we want to invok
  return {
    setName: name => {
      dispatch(setName(name));
    },
  };
};

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

App.js

const setName = name => {
  return dispatch => {
    setTimeout(() => {
      dispatch({
        type: 'SET_NAME',
        payload: name,
      });
    }, 2000);
  };
};

const setAge = age => {
  return {
    type: 'SET_AGE',
    payload: age,
  };
};

export {setName, setAge};

const userReducer = (
  state = {
    name: 'Max',
    age: 27,
  },
  action,
) => {
  switch (action.type) {
    case 'SET_NAME':
      state = {
        ...state,
        name: action.payload,
      };
      break;
    case 'SET_AGE':
      state = {
        ...state,
        age: action.payload,
      };
      break;
  }
  return state;
};

export default userReducer;

import {applyMiddleware, combineReducers, compose, createStore} from 'redux';
import thunk from 'redux-thunk';
import mathReducer from '../reducers/mathReducer';
import userReducer from '../reducers/userReducer';

const store = createStore(
  combineReducers(
    {math: mathReducer, user: userReducer},
    // applyMiddleware(thunk) not work :]
    compose(applyMiddleware(thunk)), //same :]
  ),
);

export default store;

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Main changeUsername={() => this.props.setName('Oliver')} />
        <User username={this.props.user.name} />
      </View>
    );
  }
}



const mapStateToProps = state => {
  return {
    user: state.user, //user is a key == userReducer
    math: state.math,
  };
};

const mapDispatchToProps = dispatch => {
  // to excute the actions we want to invok
  return {
    setName: name => {
      dispatch(setName(name));
    },
  };
};

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

类应用程序扩展组件{
render（）{
返回(
this.props.setName（'Oliver'）}/>
);
}
}
常量mapStateToProps=状态=>{
返回{
user:state.user，//user是一个key==userReducer
数学：州立大学，数学，
};
};
const mapDispatchToProps=调度=>{
//执行我们想要调用的操作
返回{
setName:name=>{
调度（setName（name））；
},
};
};
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；

您正在将

applyMiddleware（thunk）

作为combineReducers参数传递，它应该作为createStore第二个参数传递

const store = createStore(
  combineReducers({math: mathReducer, user: userReducer}),
  applyMiddleware(thunk)
);

---

您正在将

applyMiddleware（thunk）

作为combineReducers参数传递，它应该作为createStore第二个参数传递

const store = createStore(
  combineReducers({math: mathReducer, user: userReducer}),
  applyMiddleware(thunk)
);

---

您正在将

applyMiddleware（thunk），

传递给

combineReducers

，它应该是createStore第二个参数，检查我更新的代码哦，对了，我想问您我的问题是否偏离主题，但您能解释一下applyMiddleware的功能吗？为什么我们要使用它？中间件是使用自定义功能扩展Redux的建议方法。中间件允许您包装商店的分派方法，以获得乐趣和利润。中间件的关键特性是它是可组合的。多个中间件可以组合在一起，其中每个中间件都不需要知道链中它之前或之后的内容。您可以在这里阅读更多信息>

https://redux.js.org/api/applymiddleware/

如果您有时间，可以检查您是否正在将

applyMiddleware（thunk），

传递给

combinereducer

，它应该是createStore第二个参数，检查我的更新代码哦，没错，我想问你我的问题是否离题，但你能解释一下applyMiddleware是做什么的吗？为什么我们要使用它？中间件是使用自定义功能扩展Redux的建议方法。中间件允许您包装商店的分派方法，以获得乐趣和利润。中间件的关键特性是它是可组合的。多个中间件可以组合在一起，其中每个中间件都不需要知道链中它之前或之后的内容。您可以在这里阅读更多信息>

https://redux.js.org/api/applymiddleware/

如果您有时间，可以检查一下吗