Question

我第一次与redux-saga合作，目前我没有运气。我认为我的行为没有被传递到我的传奇中，但我不确定？下面我提供了代码示例。我目前没有传递任何API调用，只是一些功能来实现这一目标。

App.js文件：

import React from "react";
import Setup from "./src/boot/setup";
import { Provider } from 'react-redux';
import store from './src/store';

export default class App extends React.Component {

render() {

  return (
  <Provider store={store}>
  <Setup/>
  </Provider>
 );
 }
}

store.js

import {createStore, applyMiddleware} from 'redux';
import createSagaMiddleware from 'redux-saga';
import AllReducers from '../src/reducers';
import rootSaga from '../src/saga'; 


const sagaMiddleware = createSagaMiddleware()

const store = createStore(
  AllReducers,
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(rootSaga);

export default store;

saga.js

import { call, put, takeEvery, takeLatest } from "redux-
saga/effects";
**import {receiveHelloWorld } from "./actions";
import { REQUEST_HELLO_WORLD } from "./actions/types";**

function* helloWorld(action) {
try {

   yield put(receiveHelloWorld("Hello world from redux saga!"));
 } catch (e) {
  yield put(receiveHelloWorld("Hello world from redux saga!"));
 }
}


export default function* rootSaga() {
  yield takeLatest(REQUEST_HELLO_WORLD, helloWorld);
}

reducer.js

import { RECEIVE_HELLO_WORLD } from "../actions";

export default (state = "", { type, text = "" }) => {
  switch (type) {
   case RECEIVE_HELLO_WORLD:
   return text;
default:
  return state;
 } 
};

actionCreator.js（这是导入到index.js文件中的动作）

import { REQUEST_HELLO_WORLD, RECEIVE_HELLO_WORLD } from './types';

 export const requestHelloWorld = () => ({ 
  type: REQUEST_HELLO_WORLD 
 });
  export const receiveHelloWorld = text => ({ 
  type: RECEIVE_HELLO_WORLD, text 
});

sagaScreen.js

import React, { Component } from "react";
import { Container, Text,  Button } from "native-base";
import { connect } from "react-redux";
import styles from "../styles/styles";

import { bindActionCreators } from "redux";
import { requestHelloWorld } from "../actions";

class SagaScreen extends React.Component {

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

render() {
  return (
    <Container style={styles.container}>        
      <Text style={{marginTop: 50 }}> {this.props.helloWorld} </Text>
    </Container>

   );
 }
}

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

  const mapDispatchToProps = dispatch =>
  bindActionCreators({ requestHelloWorld }, dispatch);

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

Answer 1

更新你的传奇：
saga.js

import { fork } from "redux-saga/effects";
import watchStartSaga from "./saga";

export default function* rootSaga() {
    yield fork(watchStartSaga);
}

//更新了答案
创建新文件。目录src / saga中的 index.js 。

index.js

let gasLooper;
let gasSound = new Howl({
    preload:true
  , src: require('./assets/audio/Gas-loop.mp3')
  , autoplay: true
  , volume: 0.5
  , onplay: ()=>{
    gasLooper = setTimeout(()=>{
      gasSound.play();
    },450);
  }
  , onstop: ()=>{
    clearTimeout(gasLooper);
  }
});

Redux Saga - React Native - 正确设置？行动问题？

1 个答案: