setState를 다른 구성 요소로 전달하는 방법

setState를 다른 구성 요소로 전달하는 방법

리액션 나는 리듀렉스 & 리액션으로 간단한 앱을 만들었어.Action.js 파일에서 State를 설정한 다음 구성 요소에서 사용하려고 하는 것뿐입니다.

문제는 내가 어떻게 해야 할지 모른다는 것이다.errors에 대해 논하다.catch setState그리고 나는 이미 레이아웃 컴포넌트에 이렇게 디피케이션을 했다.

this.props.postUsers(this.state.username,this.state.password,this.state.errors)

이것이 setState를 다른 구성요소로 전달하는 올바른 방법인지 모르겠다.

참고: 나는 Reducx-promise-middleware를 사용하고 있는데, 그것은 _PENDING & _FULFULLED & _REVELUMED & _REVENTED _ REVENTED _ REVENTED

src/actions/userActions.js

export function postUsers(username, password, errors) {
    let users = {
        username,
        password,
    };
    let self = this;
    return{
        type: "USERS_POST",
        payload: axios({
            method:'POST',
            url: url,
            data: users,
            contentType: 'application/json',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            }
        })
            .then(success => {
                console.log('sucesssssssss', success)
            })
            .catch(({response}) => {
               self.setState({errors: response.data});
            })

    }
}

src/sshd/sshd.js

import React, {Component} from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import { postUsers } from '../actions/usersAction';

class Layout extends Component {
    constructor(props){
        super(props);
        this.state = {
            username: '',
            password: '',
            errors: [],
        }
    }
    onUserUpdate(filed, event){
        if (filed === 'username') {
            this.setState({
                username: event.target.value
            });
        }
        if (filed ==='password') {
            this.setState({
                password: event.target.value
            });
        }
    }

    handlePostUsers(e){
        e.preventDefault();
        this.props.postUsers(this.state.username,this.state.password,this.state.errors)
    }
    render() {
        console.log('this.state.errors',this.state.errors);
        return (
            <div className="App">
                <input name="username" onChange={this.onUserUpdate.bind(this, 'username')}/>
                <input name="username" onChange={this.onUserUpdate.bind(this, 'password')}/>
                <button onClick={(e) => this.handlePostUsers(e)}>Go ahead</button>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        act: state.users,
    };
}

function matchDispatchToProps(dispatch) {
    return bindActionCreators({postUsers}, dispatch)
}
export default connect(mapStateToProps, matchDispatchToProps)(Layout);

src/remitchers/userRimenscers.js

const initalState = {
fetching: false,
fetched: false,
users: [],
error: []
};
export default function(state=initalState, action) {
    switch(action.type){
        case "USERS_POST_PENDING":{
            return {...state, fetching: true,}
        }
        case "USERS_POST_FULFILLED":{
              return {...state, fetching: false,fetched: true, users:[...state.users, action.payload],}
        }
        case "USERS_POST_REJECTED":{
            return {...state, fetching: false, error: action.payload,}
        }
        default:
            return state;
    }
}

src/reducers/index.js

import { combineReducers } from 'redux';
import usersReducer from './usersReducer';
import tweetsReducer from './tweetsReducer';
export default combineReducers({
    users: usersReducer,
    tweets: tweetsReducer,
})

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import promise from 'redux-promise-middleware';
import reducers from './reducers/index';
import { Provider } from 'react-redux';
import registerServiceWorker from './registerServiceWorker';

import Layout from './components/layout';


const store = createStore(reducers, applyMiddleware(promise(),thunk, logger,loadingBarMiddleware()));
const app = document.getElementById('root');

ReactDOM.render(
<Provider store={store}>
        <Layout />
</Provider>
    ,app);
registerServiceWorker();

구성 요소 외부에서 구성 요소의 상태를 설정할 수 있는지 잘 모르겠어.layout.js에서 userActions.js로 핸들 기능을 전달해야 할 경우

따라서 코드는 다음과 같이 되어야 한다.

src/actions/userActions.js

export function postUsers(username, password, errors, errorFunction) {
let users = {
    username,
    password,
};
let self = this;
return{
    type: "USERS_POST",
    payload: axios({
        method:'POST',
        url: url,
        data: users,
        contentType: 'application/json',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        }
    })
        .then(success => {
            console.log('sucesssssssss', success)
        })
        .catch(({response}) => {
           errorFunction(response.data);
        })

    }
}

src/sshd/sshd.js

    ...
        handlePostUsers(e){
    e.preventDefault();
    this.props.postUsers(
        this.state.username,
        this.state.password,
        this.state.errors,
        (responseData)=>{this.setState({errors: responseData})
        });
}
    ...

참조URL: https://stackoverflow.com/questions/48298605/how-to-pass-setstate-to-another-component