처음부터 리액션 3부.

'0부터 반응'시리즈의 세 번째 부분이자 마지막 부분에서 우리는 응용 프로그램에 Redux를 추가함으로써 상태 관리를 실현할 것이다.

선결 조건

3부는 2부가 끝나는 곳부터 시작한다.만약 네가 아직 없다면, 나의 환매 협의clone part 2를 계속 완성하고 거기서부터 시작해라.

새로운 종속성

레드ux와 새로운 의존항을 추가하는 것부터 시작합시다.

$ npm i redux react-redux redux-thunk

redux: 상태 용기에 사용되는 자바스크립트 라이브러리입니다.

react-redux: React 바인딩은 redux에 사용됩니다.

redux-thunk: Redux용 Thunk 중간부품입니다.

만약 당신이thunk에 대한 더 많은 정보를 알고 싶다면, 나는 당신이 읽는 것을 건의합니다. this

글로벌 스토어

프로그램의 모든post 데이터를 저장하는 이른바 저장소를 만드는 것이 우리의 목표입니다.
이 저장소는 또한 저장소에서 게시물을 추가하거나 삭제하는 등 저장된 데이터를 처리하는 방법에 대한 접근을 제공할 것이다.
이 스토리지를 생성한 후에는 Todo 구성 요소의 상태를 제거하고자 합니다.
먼저 새 폴더를 만드는 것부터 시작하겠습니다.

$ mkdir store
$ mkdir actions
$ mkdir reducers

그런 다음 store 폴더에 새 파일을 만듭니다.

$ cd store/
$ touch configureStore.js

이 파일은 thunk 중간부품을 추가하는 등 전 세계 상점의 모든 설정을 포함할 것입니다.
내용은 다음과 같아야 합니다.

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

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

createStore 방법을 사용하여 Redux 스토리지를 만들 수 있습니다.그 상점에는 환원제, 응용 프로그램의 초기 상태, 이른바 증강제가 필요하다.
증강기는 우리 상점에 기능을 추가하는 중간부품이다.우리의 예에서, 우리는 Redux Developer Tools 를 사용하고, Reduxthunk를 추가했다.
이제 이 저장소를 응용 프로그램에 전달해야 합니다.이것은 우리가 이전에 설치한react redux 라이브러리의 제공 프로그램을 사용하여 실현된 것이다.
우리는 우리의 주요 구성 요소에 저장을 제공해야 한다.우리의 뿌리를 열어보자.js 및 구현:

import React from 'react';
import Routes from '../Routes';
import { Provider } from 'react-redux';

const Root = ({ store }) => (
    <Provider store={store}>
        <Routes />
    </Provider>
);

export default Root;

우리의 루트 구성 요소는 이제 저장을 받아들일 수 있습니다. 우리는 그것을 전송하기만 하면 됩니다.우리는 색인에서 이렇게 한다.js 파일:

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import store from './store/configureStore';
import Root from './containers/Root';
import './index.scss';

ReactDOM.render(
  <StrictMode>
    <Root store={store} />
  </StrictMode>,
  document.querySelector('#root'),
);

감속기

이 코드가 제대로 작동하려면 rootReducer를 만들어야 합니다.

$ cd ../reducers/
$ touch index.js
$ touch todoReducer.js

색인을 열겠습니다.js 및 다음을 추가합니다.

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

export default combineReducers({
  todo: todoReducer,
});

방법combineReducers에서 대상과 프로그램의 모든 복원기를 가져옵니다.
이 점에서 우리는 configure Store에서 했던 것처럼 메모리에 전달할 수 있는 감속기를 만들었다.js.
이제 todo Reducer로 전환해서 생명을 줍시다!

import { ADD_TODO, DELETE_TODO } from '../actions/types';
const initialState = {
  todos: localStorage.getItem('todos') ? 
    JSON.parse(localStorage.getItem('todos')) : [],
  error: null,
}

export default (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      const newTodos = [action.payload, ...state.todos]
      localStorage.setItem('todos', JSON.stringify(newTodos))
      return {
        ...state,
        todos: newTodos,
      };
    case DELETE_TODO:
      return {
        ...state,
        todos: state.todos.filter(todo => todo._id !== action.payload)
      };

    default:
      return state;
  }
}

감속기는 모든 TODO의 초기 상태를 가집니다.우리는 브라우저의 localStorage에 모든 업무 내용을 저장할 것입니다.
이렇게 하면 페이지를 다시 로드한 후에도 TODO에 액세스할 수 있습니다.
스위치 박스는 호출된 동작과 현재 상태에 따라 새로운 상태를 만듭니다.
그것은 현재 상태를 수정하지 않을 것이다. 왜냐하면 레드ux는 불변성의 개념을 실현했기 때문이다.

행동

다음에 Reducer 탐지 동작을 만듭니다.

$ cd ../actions/
$ touch types.js
$ touch todoActions.js

우선, 우리는 유형에 상수를 생성합니다.js, 우리는 이미 todoReducer에서 사용한 적이 있습니다.

export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';

이제 TodoActions에서 두 가지 조작인 ADD와 DELETE를 실현합니다.js:

import { ADD_TODO, DELETE_TODO } from './types';

export const addTodo = (todo) => (dispatch) => {
  dispatch({
    type: ADD_TODO,
    payload: todo,
  });
};

만약 우리가 TODO를 어떤 백엔드에 저장한다면, 우리는 axios를 통해 그것을 그곳에 보낼 수 있다.js 또는 다른 프레임워크
하지만 이제 전달된 todo와 ADD todo 형식만 todoReducer에 보내면 됩니다.
addTodo의 바로 아래에는 다음과 같이 deleteTodo가 있습니다.

export const deleteTodo = (id) => (dispatch) => {
  dispatch({
    type: DELETE_TODO,
    payload: id,
  })
};

그것의 작업 원리는addTodo와 거의 같지만, 우리는 전체 todo를 전달하지 않았다.
삭제할 todo의 id만 전송하면 됩니다.

Recux와 React 연결

현재 Todo 애플리케이션은 이전과 마찬가지로 작동하고 있습니다.Redux 스토어를 이용하려면 Todo 구성 요소에 연결해야 합니다.

import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { addTodo, deleteTodo } from '../actions/todoActions';
import TodoListContainer from '../containers/TodoList';
import NewTodoContainer from '../containers/NewTodo';

export class Todo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      showNewTodo: false,
      title: '',
      text: '',
    };
  }

  static propTypes = {
    todos: PropTypes.array.isRequired,
    addTodo: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired,
  };

  toggleNewTodo() {
    this.setState({
      showNewTodo: !this.state.showNewTodo
    });
  }

  onChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  onSubmit(event) {
    event.preventDefault();
    const { text, title } = this.state;
    const newTodo = { id: this.props.todos.length + 1, title, text };
    this.props.addTodo(newTodo);
    this.setState({
      showNewTodo: false,
      title: '',
      text: '',
    });
  }

  render() {
    const { showNewTodo } = this.state;
    return (
      <Fragment>
        <div className="container-fluid">
          <div className="col w-25 mt-4 mx-auto">
            { showNewTodo ? 
              (<Fragment>
                <button className="mb-2 w-100 btn btn-danger" onClick={this.toggleNewTodo.bind(this)}>Cancel</button> 
                <NewTodoContainer 
                  onChange={this.onChange.bind(this)}
                  onSubmit={this.onSubmit.bind(this)} />
              </Fragment>)
              : (<button className="mb-2 w-100 btn btn-success" onClick={this.toggleNewTodo.bind(this)}>Add Todo</button>)
              }
            <TodoListContainer 
              todos={this.props.todos}
            />
          </div>
        </div>
      </Fragment>
    );
  }
}

const mapStateToProps = (state) => ({
  todos: state.todo.todos,
});

const mapDispatchToProps = (dispatch) => ({
  addTodo(todo) {
    dispatch(addTodo(todo));
  },
  deleteTodo(id) {
    dispatch(deleteTodo(id));
  },
});


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

여기에는 여러 가지 일이 동시에 발생했기 때문에 위에서 아래로 분석해 봅시다.

react redux에서connect 함수를 가져왔습니다.그리고 PropTypes와 이전에 이루어진 두 가지 새로운 조작addTodo와 deleteTodo를 가져왔습니다.

구조기는 약간의 정리가 필요하기 때문에 우리는 모든 TODO를 삭제했다. 왜냐하면 우리는 지금부터 그것들을 우리의 상점에 보존하기 때문이다.

저장소의 TODO와 우리가 가져온 두 동작이 정확한 유형을 얻었고 이 구성 요소에 필요한 것을 확보하기 위해 정적 propTypes를 추가했습니다.

onSubmit 방법에서 newTodo를 만들고 이 방법으로 접근해서addTodo 작업에 전달합니다.도구.구성 요소 상태에 TODO 목록이 더 이상 포함되지 않으므로 setState 메서드에서 TODO를 삭제했습니다.

구성 요소 클래스의 바로 아래에 두 개의 화살표 함수를 추가했습니다.
mapStateToProps는 전송된 Redux 상태를 가져오고 이 상태에 추가하여 TODO로 되돌려줍니다.우리 조립품의 도구.
mapDispatchToProps는 우리의 작업addTodo와 deleteTodo를 여기에 비추었습니다.우리 조립품의 도구.

마지막으로react-redux 방법인connect를 사용하여 두 개의 화살표 함수를 Todo 구성 요소에 비추어 모든 상태와 조작에 접근할 수 있도록 합니다.도구.

결론

이 시리즈의 세 번째 부분은 이것으로 끝냅니다.
우리는 응용 프로그램에서 Redux 메모리, Reducer, actions를 실현했다.그런 다음 react redux를 사용하여 이 새 기능을 Todo 구성 요소에 연결합니다.
이 모든 것을 통해 우리는 localStorage를 신속하게 이해했고, 지금은 브라우저 localStorage에서 데이터를 쓰고 읽을 수 있습니다.
이미 알고 계신 바와 같이, 저희는 어느 곳에서도 deleteTodo 방법을 사용하지 않습니다.내가 이렇게 하는 것은 의도적인 것이다. 이렇게 하면 너는 스스로 이 구성 요소에 삭제 기능을 추가할 수 있다.
좋아했으면 좋겠어!
만약 당신에게 무슨 문제가 있으면 저에게 연락을 주십시오.
이 여러 부분 시리즈의 모든 코드는 이것GitHub-Repository에서 찾을 수 있다.