Question

我正在尝试使用react-native redux创建一个注册表单。在将动作，reducer，存储和注册表单相互连接在一起之后，所有动作都可以使用，但是它们并不能帮助reduce更新状态。

这是我的代码：

这是App.js（商店）

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import AppContainer from './Navigate';
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
class App extends Component {
    render() {
        
        return (
            <Provider store={store}>
                <AppContainer />
            </Provider>
        );
    }
}

export default App;

reducer / SignUpReducer.js

import { ADD_CUSTOMER_DETAILS, ENTER_NAME, ENTER_NUMBER, ENTER_EMAIL } from '../actions/types';

const INITIAL_STATE = {
    name: '', no: '',  email: '', addCusDetails: ''
};

export default (state = INITIAL_STATE, action) => {

    console.log('signup',action);

    switch (action.type) {
        case ENTER_NAME:
            return { ...state, name: action.payload };
        case ENTER_EMAIL:
            return { ...state, email: action.payload };
        case ENTER_NUMBER:
            return { ...state, no: action.payload };
        case ADD_CUSTOMER_DETAILS:
            return { ...state, addCusDetails: action.payload }
        default:
            return state;
    }
};

reducer / index.js

import { combineReducers } from 'redux';
import SignUpReducer from './SignUpReducer';

export default combineReducers({
    singupDetails : SignUpReducer
});

action / SignUpActions.js

import axios from 'axios';
import { ADD_CUSTOMER_DETAILS, ENTER_NAME, ENTER_NUMBER, ENTER_EMAIL } from './types';

export const enterName = (text) => {
  console.log(text)
  return {
      type: ENTER_NAME,
      payload: text
  };
};
export const enterNumber = (text) => {
  return {
      type: ENTER_NUMBER,
      payload: text
  };
};

export const enterEmail = (text) => {
  console.log(text)
    return {
        type: ENTER_EMAIL,
        payload: text
    };
};

export const singupDetails = ({ name, no, email }) => {
  let userData = { name, no, email }
  console.log('signupDataTest',userData);
    return (dispatch) => {
      axios.post('http://192.178.43.226/testProject/signup.php')
        .then((response) => {
          console.log('signup', response);
          dispatch({
            type: ADD_CUSTOMER_DETAILS,
            payload: response.data
          });
        })
        .catch((error) => {
          console.log(error);
        });
    };
  };

SignUpForm.js

import React from 'react'
import { SignupForm } from 'common'
import { enterName, enterNumber, enterEmail, singupDetails } from '../../../actions';
import { connect } from 'react-redux';

class SignUp extends React.Component {

  enterName = (text) => {
    //console.log(text);
    this.props.enterName(text);
  };
  enterNumber = (text) => {
    this.props.enterNumber(text);
  };

  enterEmail = (text) => {
    this.props.enterEmail(text);
  };

  _onSubmitForm = () => {
    console.log('ghgh', this.props.email);
    const { name, no, email } = this.props;
    this.props.singupDetails({ name, no, email })
  }

  render() {
    console.log(this.props)
    return (
      <SignupForm
      onName={(text) => enterName(text)}
      onEmail={(text) => enterEmail(text)}
      onNumber={(text) => enterNumber(text)}
      onSubmit={() => this._onSubmitForm()}
    > 
  }
}

const mapStateToProps = state => {
  return {
    name: state.singupDetails.name,
    email: state.singupDetails.email,
    no: state.singupDetails.no
  };
};
//Make the component available to other parts of app
export default connect(mapStateToProps, { enterName, enterNumber, enterEmail, singupDetails })(SignUp);

Answer 1

使用stackblitz sandbox转换为最小工作应用程序组件稍有变化，正确的道具名称（名称和动作均正确），我发现减速器和所有接线都有效。

App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import AppContainer from './form';

class App extends Component {
    render() {
        const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
        return (
            <Provider store={store}>
                <AppContainer />
            </Provider>
        );
    }
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

form.js

import React from 'react'
//import { SignupForm } from 'common'
import { enterName, enterNumber, enterEmail, singupDetails } from './actions';
import { connect } from 'react-redux';


const SignupForm = ({name, onName}) => {
return (<div>
<input onChange={(e) => onName(e.target.value)} value={name} />
</div>);
}

class SignUp extends React.Component {

  enterName = (text) => {
    //console.log(text);
    this.props.entername(text);
  };
  enterNumber = (text) => {
    this.props.enterno(text);
  };

  enterEmail = (text) => {
    this.props.enteremail(text);
  };

  _onSubmitForm = () => {
    console.log('ghgh', this.props.email);
    const { name, no, email } = this.props;
    this.props.singupDetails({ name, no, email })
  }

  render() {
    console.log('props -->', this.props)
    return (
      <SignupForm
      name={this.props.name}
      onName={(text) => this.props.enterName(text)}
    />) 
  }
}

const mapStateToProps = state => {
  return {
    name: state.singupDetails.name,
    email: state.singupDetails.email,
    no: state.singupDetails.no
  };
};
//Make the component available to other parts of app
export default connect(mapStateToProps, { enterName, enterNumber, enterEmail, singupDetails })(SignUp);

reduers.js（减速器/索引）

import { combineReducers } from 'redux';
import SignUpReducer from './sign';

export default combineReducers({
    singupDetails : SignUpReducer
});

sign.js（注册）

import { ADD_CUSTOMER_DETAILS, ENTER_NAME, ENTER_NUMBER, ENTER_EMAIL } from './types';

const INITIAL_STATE = {
    name: '', no: '',  email: '', addCusDetails: ''
};

export default (state = INITIAL_STATE, action) => {

    console.log('signup', state, action);

    switch (action.type) {
        case ENTER_NAME:
            return { ...state, name: action.payload };
        case ENTER_EMAIL:
            return { ...state, email: action.payload };
        case ENTER_NUMBER:
            return { ...state, no: action.payload };
        case ADD_CUSTOMER_DETAILS:
            return { ...state, addCusDetails: action.payload }
        default:
            return state;
    }
};

types.js

export const ADD_CUSTOMER_DETAILS = 'ADD_CUSTOMER_DETAILS';
export const ENTER_NAME = 'ENTER_NAME';
export const ENTER_NUMBER = 'ENTER_NUMBER';
export const ENTER_EMAIL = 'ENTER_EMAIL';

actions.js

import axios from 'axios';
import { ADD_CUSTOMER_DETAILS, ENTER_NAME, ENTER_NUMBER, ENTER_EMAIL } from './types';

export const enterName = (text) => {
  console.log(text)
  return {
      type: ENTER_NAME,
      payload: text
  };
};
export const enterNumber = (text) => {
  return {
      type: ENTER_NUMBER,
      payload: text
  };
};

export const enterEmail = (text) => {
  console.log(text)
    return {
        type: ENTER_EMAIL,
        payload: text
    };
};

export const singupDetails = ({ name, no, email }) => {
  let userData = { name, no, email }
  console.log('signupDataTest',userData);
    return (dispatch) => {
      axios.post('http://192.178.43.226/testProject/signup.php')
        .then((response) => {
          console.log('signup', response);
          dispatch({
            type: ADD_CUSTOMER_DETAILS,
            payload: response.data
          });
        })
        .catch((error) => {
          console.log(error);
        });
    };
  };

Reducer没有被调用

1 个答案: