第一次使用redux。 如何執行？

Question

我正在閱讀Redux的一些教程，但仍然無法理解如何將其實現到現有組件。 每個教程都有一些不同的方法，我很困惑。 我有下面的代碼，並想使用Redux進行狀態管理。 我假設需要刪除this.setState函數和控件狀態，但是在這種情況下，我實際上如何觸發函數handleSubmit ？ 我已經寫了reducer, store, dispatch ，但是我還需要什么呢？

import React, { Component } from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField';

import { createStore } from "redux";
import { Provider } from 'react-redux'

const reducer = (state={errorText: '', open: true}, action) => {
  switch(action.type) {
    case "CHECK_PASSWORD": {
        return state = {...state, open: false};
    }
    default:
        return state;
 }
}

const store = createStore(reducer, {
    errorText: '',
    open:true
});

store.subscribe(() => {
console.log('store change', store.getState())
})

store.dispatch({type: "CHECK_PASSWORD"})

export default class StartDialog extends Component {

  handleSubmit = event => {
    let password = this.refs.myPasswordValue.input.value;
    // Check default password
      if(password === "123"){
            this.setState({ errorText: '', open: false})
      } else if (password !== "123" && password !== "") {
            this.setState({ errorText: "Password is incorrect" })
      } else if (password === ""){
            this.setState({ errorText: "Password is required" })
      }
     };

render() {
 const actions = [ <FlatButton label="Submit" primary={true} onClick={this.handleSubmit} /> ];

return (
    <Provider store={store} >
        <Dialog title="Welcome to the React App!" actions={actions} modal={true} open={this.state.open} >
            <TextField errorText={this.state.errorText}
            hintText="Password Field" 
            floatingLabelText="Password" 
            type="password" 
            ref="myPasswordValue" />
        </Dialog>
    </Provider>
);}} 

Answer 1

實際上，您不應該在派遣動作的同一組件中使用<Provider>來采用這種類型的結構。 意味着我希望您將其視為父子關系，其中Provider將在父級中，並且所有存儲操作和訂閱都應在子級中完成。 查看Dan Abramov關於Redux具有代碼結構的討論，因為UI組件中不應包含邏輯，而邏輯應在父組件中進行控制。

當您使用store中的狀態時，則不需要setState 。 實際上，當您需要狀態作為某些組件中的隱式數據時，則必須使用setState 。 同樣，在分派動作時，您已經描述了type屬性，但沒有像reducer中提到的那樣附加實際的有效負載（ open ）。

您還可以改善代碼結構，例如（以“新手透視”的方式）-

在index.js中，應集成主要的<Provider>組件，以將狀態作為子組件提供給下方的組件。

示例index.js （根）代碼類似於-

import React from 'react';
import ReactDOM from 'react-dom';
import store from './store/store';
import TodoApp from './container/todoapp';
import { Provider } from 'react-redux';

const render = () => {
    ReactDOM.render(
    <Provider store={store}>
        <TodoApp />
    </Provider>
    ,document.getElementById('root'));
}

因此，現在可以使用子組件存儲了。 因此，現在您可以使用connect()進行連接以直接存儲為mapStateToProps和mapDispatchToProps必需的傳遞args 。

來自容器文件夾的todoapp.js示例文件-

import React from 'react';
import ReactDOM from 'react-dom';
import store from '../store/store';
import Todolist from './components/todolist';
import AddTodo from './components/addtodo';
import Footer from './components/footer';
import { connect } from 'react-redux';

var noteId = 0;

const getVisibleTodos = (todos,filter) => {
    switch(filter){
        case 'SHOW_ALL' : 
            return todos;
        case 'SHOW_COMPLETED' :
            return todos.filter(t => t.completed);
        case 'SHOW_ACTIVE' :
            return todos.filter(t => !t.completed);
        default :
            return todos;
    }
}

class TodoApp extends React.Component{

    render() {
        const {todos,visibilityFilter} = this.props;

        return(
            <div>
                <AddTodo onAddClick={this.props.onAddTodoClick} />
                <ul>
                    <Todolist todos={this.props.todos} 
                    onTodoClick ={this.props.onTodoListClick}/>
                </ul>
                <Footer visibilityFilter={this.props.visibilityFilter} 
                        onFilterClick={this.props.onLinkClick} />
              <button onClick = {() => console.log(store.getState())}> Arbitrary Button </button>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        visibilityFilter : state.visibilityFilter,
        todos: getVisibleTodos(state.todos,state.visibilityFilter)
    }
}

const mapDispatchToProps = (dispacth) => {
    return {
        onLinkClick : (filter) => {
            store.dispatch({type :'SET_VISIBILITY_FILTER',filter});
        },
        onTodoListClick : (id) => {
            store.dispatch({type:'TOGGLE_TODO',id});
        },
        onAddTodoClick : (text) => {
            store.dispatch({type:'ADD_TODO',id : noteId++,text})
        }
    }
}

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

render();

商店將包括-

 import {createStore, combineReducers} from 'redux';

 const todo = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      }
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state;
      }

      return {
        ...state,
        completed: !state.completed
      }
    default:
      return state;
  }
}

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ]
    case 'TOGGLE_TODO':
      return state.map(t => todo(t, action));
    default:
      return state;
  }
}

const visibilityFilter = (state = 'SHOW_ALL', action) => {
  switch(action.type){
      case 'SET_VISIBILITY_FILTER' :
          return action.filter;
      default :
          return state;
  }
}


const todoApp = combineReducers({ todos,visibilityFilter })

const store = createStore(todoApp);
console.log(store.getState());

export default store;

如果您要實施必須升級當前項目的更復雜的項目結構，請檢查此代碼結構-https://github.com/react-boilerplate/react-boilerplate