반응합시다. 30일 안에 React를 배우세요. 27일

16343 단어 devjournalreactbeginnersjavascript
30년에 React를 배우기 전까지는 함수 기반 컴포넌트와 Hooks로 작업했습니다. 최근에 저는 Redux로 상태 관리로 전환했습니다.

저는 Redux가 지금까지 가장 도전적인 주제라는 것을 알았습니다. 스토어, 액션, 리듀서, 썽크, 사가, 디스패치. 일부 튜토리얼은 Redux를 다른 튜토리얼과 다르게 다룹니다. 때때로 약간 혼란 스럽습니다.

지금까지 제가 했던 질문들입니다.

내 상태를 어디에 입력해야 합니까?



현지 상태는 괜찮습니다. 그리고 아마도 Redux가 필요하지 않을 것입니다. 참조You Might Not Need Redux

props를 구성 요소 계층 구조로 전달하는 것의 대안은 일부 구성 요소가 children props를 수신하고 하위 구성 요소에 직접 상태를 전달하도록 하는 것입니다. Redux vs. The React Context API에 대한 응답 참조
user 및 Nav 내부에서 사용하기 위해 Body 및 UserAvatar 구성 요소를 통해 UserStats 소품을 전달할 필요가 없는 방법은 아래 스니펫에서 확인하십시오.

class App extends React.Component {
  state = {
    user: {
      avatar:
        "https://www.gravatar.com/avatar/5c3dd2d257ff0e14dbd2583485dbd44b",
      name: "Dave",
      followers: 1234,
      following: 123
    }
  };

  render() {
    const { user } = this.state;

    return (
      <div className="app">
        <Nav>
          <UserAvatar user={user} size="small" />
        </Nav>
        <Body
          sidebar={<UserStats user={user} />}
          content={<Content />}
        />
      </div>
    );
  }
}


Redux 스토어에 무엇을 넣어야 하나요? 모든 것을 Redux 스토어에 넣어야 하나요?



다른 구성 요소에도 해당 상태가 필요한지 스스로에게 물어보십시오. 그렇지 않으면 구성 요소 내부에 유지할 수 있습니다. 참조Do I have to put all my state into Redux?

내 API를 어디에서 호출해야 합니까?



감속기에서 API 호출을 시도하지 마십시오. 작업을 사용합니다. 썽크를 사용할 수 있습니다. 비동기 작업을 수행하고 다른 작업을 전달하는 함수의 이름을 지정하는 멋진 단어입니다.

대안으로 sagas를 사용할 수 있습니다. 나는 다른 맥락에서 무용담을 알고 있었다. 그러나 그들은 행동에 대한 청취자입니다. Trying to put API calls in the correct place 및 Where should I put synchronous side effects linked to actions in redux? 참조

리듀서에 비동기를 넣을 수 없는 이유는 무엇입니까?



감속기가 순수하기를 원합니다. 리듀서 내부에서만 상태를 변경해야 합니다. 참조Reducers Must Not Have Side Effects

앵커 태그 안에 버튼을 넣을 수 없습니다.



가능하지만 의미상 유효하지 않습니다. 부트스트랩으로 작업 중이고 앵커 태그의 스타일을 지정해야 하는 경우 react-router-bootstrap에서 LinkContainer를 사용할 수 있습니다.

간단한 카운터 예시



1단계: 스토어 및 리듀서 만들기




// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { INCREMENT, DECREMENT } from './actions';
import App from './App';

const initialState = {
  count: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { count: state.count + 1 };

    case DECREMENT:
      return { count: state.count - 1 };

    default:
      return state;
  }
}

const store = createStore(reducer);

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


2단계: 작업 유형 및 작업 작성자 만들기




// actions.js

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

export const increment = () => {
    return { type: INCREMENT };
}

export const decrement = () => {
    return { type: DECREMENT };
}


3단계: 구성 요소 연결 및 소품 받기



구성 요소를 Redux에 연결하려면 구성 요소에 필요한 것을 상태에서 가져와야 합니다. 이를 달성하려면 mapStateToProps 함수가 필요합니다.

구성 요소를 Redux에 연결하면 dispatch를 사용하여 상태를 업데이트할 수 있습니다. dispatch에서 props를 받아 dispatch({ type: INCREMENT }); 사용

그러나 작업 생성을 추상화하도록 선택할 수도 있습니다. 예를 들어 dispatch(increment());를 대신 사용할 수 있습니다.

심지어 구성 요소 내부에서 dispatch를 사용하는 대신 사용자 지정 함수를 전달하도록 선택할 수 있습니다. 컴포넌트를 스토어에 연결할 때 mapDispatchToProps 함수가 필요합니다.

import React from 'react';
import { increment, decrement } from './actions';
import { connect } from 'react-redux';

const App = ({ count, increment, decrement }) => {

    return (
        <div>
            <h2>Counter</h2>
            <div>
                <button onClick={() => decrement()}>-</button>
                <span>{count}</span>
                <button onClick={() => increment()}>+</button>
            </div>
        </div>
    );
}

// Connect the store with the component
const mapStateToProps = (state) => {
    return {
        count: state.count
    }
}

// It override dispatch with these custom functions
const mapDispatchToProps = {
    increment,
    decrement
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);


지금까지 사용한 비디오 및 자습서는 LetsReact에서 찾을 수 있습니다.



즐거운 코딩하세요!
QLExpress 스크립트 언어 기술 설명 (2) ---QL의 기본 실행 과정
설정이 비교적 완전한log4j.xml 파일 (1)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage